Was ist HTML zu PDF?

Wandelt HTML-Markup in ein herunterladbares PDF um. Unterstützt CSS-Stile, Bilder, Tabellen und benutzerdefinierte Seitengrößen. Praktisch für Rechnungen, Berichte oder das Offline-Speichern formatierter Webinhalte.

Wähle Papierformat A4, A3, Letter oder Legal, wechsle zwischen Hoch- und Querformat und stelle Ränder zwischen 0 und 20 mm ein. Bei Bedarf schützt du die Datei per Passwort oder setzt Seitenzahlen in die Fußzeile. Inline-CSS, Base64-Bilder und Tabellen landen wie erwartet im PDF. Die Konvertierung läuft über html2pdf.js auf html2canvas, sodass Seiten mit Webfonts oder aufwendigen CSS-Effekten leicht von der Live-Vorschau abweichen können.

Anleitung

1. Schritt 1 — Füge deinen HTML-Inhalt in den Editor ein oder tippe ihn ein. Die Live-Vorschau zeigt genau, wie das PDF aussehen wird.
2. Schritt 2 — Konfiguriere die Seiteneinstellungen: Wähle Papierformat (A4, A3, Letter, Legal), Ausrichtung (Hoch-/Querformat) und Ränder. Optional kannst du ein Passwort setzen oder Seitenzahlen einfügen.
3. Schritt 3 — Klicke auf „PDF erstellen“, um das Dokument zu generieren, und lade es direkt auf dein Gerät herunter.

Wann verwenden

• Eine HTML-Vorlage für Rechnung oder Beleg in ein PDF wandeln, bevor sie an den Kunden geht.
• Einen Report mit Diagrammen und Tabellen als portable Archivkopie sichern.
• Druckfertige Handouts aus Webinhalten für Workshop oder Unterricht erzeugen.

Ergebnis

Ein Freelancer fügt seinen Rechnungs-HTML-Code mit Firmenlogo, aufgeschlüsselter Tabelle und Gesamtbeträgen ein. Er wählt A4 Hochformat mit 20 mm Rändern und lädt ein professionelles PDF herunter, das er per E-Mail an seinen Kunden schickt.

Häufige Fragen

Warum sieht das PDF anders aus als die Live-Vorschau?

Das PDF wird über html2canvas rasterisiert: Die Seite wird zunächst in ein Bild gezeichnet und anschließend in ein PDF verpackt. Noch nicht geladene Webfonts, position: fixed-Elemente und CSS-Filter können dadurch leicht abweichend gerendert werden.

Kann ich Bilder einbinden, die auf einer anderen Domain liegen?

Nur, wenn der Host passende CORS-Header schickt. Andernfalls kommt html2canvas nicht an die Pixel und das Bild bleibt im PDF leer. Workaround: Bild herunterladen und als Base64 einbetten, oder über dieselbe Origin ausliefern.

Wie steuere ich Seitenumbrüche?

Setze die CSS-Regel page-break-before: always (oder page-break-after) auf das Element, mit dem eine neue Seite starten soll. In Tabellen sorgt page-break-inside: avoid auf einer Zeile dafür, dass sie nicht zwischen zwei Seiten zerrissen wird.

Ist der Text im PDF auswählbar?

Meistens nicht. Da der Renderer die Seite via Canvas plattmacht, wird Text zu einer Bitmap. Manche Lösungen legen eine unsichtbare Textebene darüber, dieses Tool erzeugt aber rasterisierte PDFs — lesbar, aber selten kopierbar.

Gibt es eine Größenbegrenzung für das eingefügte HTML?

Praktisch liegen wir bei einigen hundert KB Markup oder 10-15 Seiten. Längere Seiten können den Speicher sprengen, weil das gesamte DOM zunächst in eine einzige Canvas gerendert und erst danach in Seiten geschnitten wird.

Ähnliche Tools