Kein Upload, 100% lokal, kein Konto

HTML in PDF

Fügen Sie HTML ein, wählen Sie ein Seitenformat und laden Sie ein PDF herunter, alles wird in Ihrem Browser gerendert.

So funktioniert HTML in PDF

HTML zu PDF nimmt HTML-Code, den Sie in den Editor einfügen, bereinigt ihn mit DOMPurify (entfernt Skripte und unsichere Attribute), rendert ihn auf einer nicht sichtbaren Canvas-Fläche mit html2canvas und kodiert das Ergebnis mit jsPDF in ein PDF. Die gesamte Pipeline läuft in Ihrem Browser-Tab; kein HTML-Code und keine gerenderte Ausgabe wird an einen Server übertragen. Das macht es geeignet für die Konvertierung von HTML-Snippets mit persönlichen Daten, die Sie nicht in einen Online-Dienst einfügen möchten.

Verstehen Sie das Ausgabeformat, bevor Sie sich darauf verlassen. Die PDF-Seiten sind Rasterbilder, kein Vektortext. Text in der Ausgabe ist nicht auswählbar, nicht durchsuchbar und kann nicht neu aufgeteilt werden. Externe Ressourcen wie über URL referenzierte Bilder werden durch die Browser-CORS-Richtlinie blockiert und werden nicht geladen. Inline-Stile und eingebettetes CSS funktionieren, aber komplexe Layouts mit benutzerdefinierten Webschriften oder erweitertem CSS-Grid werden möglicherweise nicht korrekt gerendert. Für dokumentgetreue Konvertierungen ganzer Webseiten ist ein serverseitig laufender Headless-Browser das geeignetere Werkzeug.

Verfasst von Bastien Sulyan

So wird HTML in PDF verwendet, Schritt für Schritt

  1. Fügen Sie Ihren HTML-Code in den Editorbereich ein.
  2. Passen Sie optional die Seitengröße (A4 oder Letter) und die Ausrichtung an.
  3. Klicken Sie auf Konvertieren; DOMPurify bereinigt das HTML und html2canvas rendert es.
  4. Warten Sie, während jsPDF die Canvas-Ausgabe als PDF-Seiten kodiert.
  5. Laden Sie das PDF herunter.

Häufige Anwendungsfälle

  • Sie haben aus einer lokalen Vorlage im Browser eine HTML-Rechnung generiert und möchten eine PDF-Kopie haben, ohne sie an einen Konvertierungsdienst zu senden.
  • Ein einfacher aus API-Daten erstellter HTML-Bericht muss zur Archivierung als PDF gespeichert werden; füge das HTML ein und konvertiere es lokal.
  • Sie haben eine gestaltete HTML-E-Mail-Vorlage erstellt und möchten als PDF voransehen, wie sie ausgedruckt aussehen würde.
  • Ein Entwickler benötigt während des Testens schnell ein PDF aus einem HTML-Fragment, ohne einen serverseitigen Headless-Browser einzurichten.

Häufig gestellte Fragen

Warum ist der Text im Ausgabe-PDF nicht auswählbar?

Die Konvertierungspipeline rendert das HTML mit html2canvas zu einer Canvas-Bitmap und kodiert diese Bitmap dann als Bilddaten innerhalb der PDF-Seiten mit jsPDF. Die Ausgabe ist ein Rasterbild, keine Textebene. Wenn Sie ein PDF mit auswählbarem Text benötigen, wäre ein serverseitiger Headless-Browser wie Puppeteer nötig, den dieses Werkzeug absichtlich vermeidet, um die Verarbeitung lokal zu halten.

Warum erscheinen Bilder in meinem HTML nicht im PDF?

Über externe URLs geladene Bilder unterliegen der Browser-CORS-Richtlinie. Wenn der Bildserver keine freizügigen CORS-Header sendet, kann html2canvas die Pixeldaten nicht lesen und der Bildbereich bleibt leer. Inline-base64-kodierte Bilder, die direkt ins HTML eingebettet sind, oder Bilder vom selben Ursprung funktionieren ohne diese Einschränkung.

Wird das eingefügte HTML an einen Server gesendet?

Nein. Das HTML verbleibt während des gesamten Vorgangs im Browser-Arbeitsspeicher. DOMPurify bereinigt es client-seitig, html2canvas rendert es client-seitig, und jsPDF kodiert das PDF client-seitig. Nichts verlässt den Browser-Tab.

Was entfernt die DOMPurify-Bereinigung?

DOMPurify entfernt Script-Tags, Event-Handler-Attribute wie onclick und onload, javascript:-URLs und andere Konstrukte, die Code ausführen könnten. Es bewahrt strukturelles und stilistisches Markup, sodass die gerenderte Ausgabe gleich aussieht, aber sicher in einem Dokumentkontext eingebettet werden kann.

Kann ich eine vollständige Webseiten-URL statt HTML-Code einfügen?

Nein. Das Werkzeug funktioniert mit HTML-Code, den Sie direkt einfügen. Das Laden einer URL würde das Abrufen der Seite erfordern, was bei den meisten Websites auf CORS-Einschränkungen stösst und eine Netzwerkanfrage beinhalten würde, die den Vorgang aus dem lokalen Verarbeitungsmodell herausnehmen würde.