HTML in PDF umwandeln — Code einfügen, PDF speichern
Wandelt HTML-Code in ein PDF mit dem gewählten Papierformat und Rändern um
Verarbeitung im Browser · kein Hochladen
Fügen Sie ein Fragment (<div>…) oder ein ganzes Dokument (<html>…) ein. Bei einem ganzen Dokument werden nur der Inhalt von <body> und die <style>-Blöcke verwendet.
Zusätzliche Stile. Regeln mit @media print gelten ebenfalls.
Aus Sicherheits- und Datenschutzgründen werden Bilder, Schriften und CSS, die keine data:- oder blob:-Adressen sind, nie angefordert, und Skripte werden nie ausgeführt. Eine Webseite über ihre URL umzuwandeln, wird nicht angeboten.
Vorschau (druckbare Breite)
Geben Sie HTML ein, um eine Vorschau zu sehen.
Wählen Sie im Druckdialog „Als PDF speichern“ als Ziel. Das PDF enthält echten, durchsuchbaren Text; die Seitenumbrüche legt der Browser fest.
Schneidet die Vorschau in seitengroße Bilder. Der Download startet direkt ohne Dialog, aber der Text ist nicht durchsuchbar oder kopierbar, und eine Seite kann mitten in einer Zeile umbrechen.
Was das Werkzeug macht
Angebote, Quittungen und E-Mail-Vorlagen liegen oft als HTML vor. Fügen Sie HTML und CSS hier ein, sehen Sie die Vorschau in der druckbaren Breite des gewählten Papiers und speichern Sie sie auf zwei Wegen als PDF: über den Druckdialog als Text-PDF oder direkt als Bild-PDF. Der Code bleibt auf dieser Seite; nichts wird an einen Server gesendet.
So funktioniert es
- Fügen Sie das HTML ein. Bei einem ganzen Dokument (
<html>…) werden nur der Inhalt von<body>und die<style>-Blöcke verwendet. Bei Bedarf ergänzen Sie CSS im zweiten Feld. - Wählen Sie Papier (A4, Letter, A3), Ausrichtung, Ränder und ob Hintergründe gedruckt werden.
- Prüfen Sie die Vorschau, klicken Sie auf Über den Druckdialog als PDF speichern und wählen Sie „Als PDF speichern“ als Ziel.
- Oder klicken Sie auf Bild-PDF herunterladen, um ein PDF aus Seitenbildern zu erhalten.
Regeln im Detail
- Bereinigung: Der Code wird mit DOMParser (einem inerten Dokument) und dem CSS-Parser des Browsers gelesen; alle Adressen außer data: und blob: (Bilder, @import, url(), srcset), die Elemente script, iframe, object und link sowie on*-Attribute werden entfernt. Entfernte Adressen werden aufgelistet.
- Vorschaurahmen: ein abgeschotteter iframe (sandbox) ohne Skriptrechte, mit einer Content-Security-Policy, die Anfragen und Skripte blockiert.
- Schriften: Es werden die auf dem Gerät installierten Schriften verwendet; Umlaute, ß und alle anderen Schriftsysteme erscheinen so, wie der Browser sie anzeigt.
- Papier: A4 210×297 mm und A3 297×420 mm (ISO 216), Letter 8,5×11 Zoll; der Druckmodus setzt Format und Ränder mit CSS
@page. - Bild-PDF: Der in druckbarer Breite gesetzte Inhalt (680 px bei A4 mit 15 mm Rand) wird Seite für Seite in 2× erfasst und als JPEG gespeichert, bis zu 50 Seiten, mit html-to-image (MIT) und pdf-lib (MIT).
- Länge: bis zu 500.000 Zeichen für HTML und CSS zusammen.
Beispiele
| Ziel | Schritte |
|---|---|
| Ein Angebot als PDF mit durchsuchbarem Text | Beispiel einfügen → A4, normale Ränder → Druckdialog → Als PDF speichern |
| Die Datei sofort auf dem Handy | Bild-PDF herunterladen |
| Eine breite Tabelle | Querformat, schmale Ränder |
Für Markdown nutzen Sie Markdown in PDF; um HTML als PNG-Bild zu speichern, ein Werkzeug für HTML in Bild.
Häufige Fragen
Kann ich eine Webseite über ihre URL umwandeln?
Nein. Umgewandelt wird nur eingefügtes HTML. Eine fremde Website in Ihrem Namen abzurufen, würde Anfragen von Ihrem Gerät an sie senden, womöglich mit Ihrer Anmeldung. Um eine Webseite zu speichern, öffnen Sie sie und nutzen im Browser Drucken → Als PDF speichern.
Was ist der Unterschied zwischen den beiden Schaltflächen?
„Über den Druckdialog als PDF speichern“ nutzt die Druckfunktion des Browsers: Der Text bleibt durchsuchbar und Seitenumbrüche fallen zwischen die Zeilen. „Bild-PDF herunterladen“ überspringt den Dialog, speichert aber jede Seite als Bild – der Text lässt sich nicht markieren, und eine Seite kann mitten in einer Zeile umbrechen.
Warum fehlen meine Bilder oder Webfonts?
Aus Sicherheits- und Datenschutzgründen werden Bilder, Schriften und Stylesheets, die keine data:- oder blob:-Adressen sind, nie angefordert. Betten Sie Bilder als Base64-data:-URLs ein; Text verwendet die auf dem Gerät installierten Schriften.
Was passiert mit Skripten?
script-Elemente und Ereignisattribute wie onclick werden entfernt, und der Vorschaurahmen hat eine Richtlinie, die Skripte blockiert – nichts aus dem eingefügten Code wird ausgeführt.
Kann ich Seitenumbrüche steuern?
Im Druckmodus wird CSS wie `break-before: page` beachtet, und `@media print`-Regeln im CSS-Feld gelten nur beim Drucken.
