HTML zu PDF: Der vollständige Guide für perfekte Konvertierung
HTML in PDF umzuwandeln klingt einfach — aber perfekte Ergebnisse erfordern ein Verständnis davon, wie Browser mit Paginierung, CSS-Druckstilen und den Feinheiten der Seitenumbruchsteuerung umgehen. Dieser Guide erklärt alles.
Warum Seitenumbrüche das Schwierigste sind
Die häufigste Beschwerde bei HTML-zu-PDF-Tools ist, dass Inhalte an der falschen Stelle abgeschnitten werden — eine Überschrift am Ende einer Seite, während ihr Inhalt auf der nächsten beginnt, eine Tabellenzeile, die auf Seiten aufgeteilt wird, oder ein halbiertes Bild. Diese Probleme entstehen, weil die Rendering-Engine nicht weiß, welche Elemente zusammenbleiben sollen.
✅ Smart Breaks AN
Überschriften bleiben bei Inhalt, Tabellen intakt, keine verwaisten Zeilen
❌ Smart Breaks AUS
Inhalt bricht bei festen Intervallen unabhängig vom Kontext
💡 Manuelle Kontrolle
Nutze <!-- PAGE_BREAK --> um Umbrüche gezielt zu erzwingen
CSS-Eigenschaften für Seitenumbrüche
Diese CSS-Eigenschaften kannst du direkt im <style>-Tag deines HTML hinzufügen, um zu steuern, wie Seiten umbrechen:
| Eigenschaft | Wert | Effekt |
|---|---|---|
| page-break-before | always | Neue Seite vor Element erzwingen |
| page-break-after | avoid | Kein Umbruch nach Element (z. B. Überschriften) |
| page-break-inside | avoid | Element auf einer Seite halten |
| orphans | 3 | Min. Zeilen am Seitenende |
| widows | 3 | Min. Zeilen am Seitenanfang |
Weitere kostenlose Tools
Häufig gestellte Fragen
Wird mein HTML auf einen Server hochgeladen?
Ja, das HTML wird für die PDF-Generierung mit einem echten headless Chrome-Browser an unseren Server gesendet — weshalb die Ausgabequalität so hoch ist. Wir speichern dein HTML nicht; es wird sofort nach der PDF-Erstellung gelöscht.
Was ist die maximale HTML-Größe?
Bis zu 500.000 Zeichen (ca. 500 KB HTML). Für größere Dokumente empfehlen wir, die Konvertierung in mehrere Teile aufzuteilen.
Werden meine CSS-Stile erhalten?
Ja. Da wir einen echten Chrome-Browser (Puppeteer) verwenden, wird alles CSS — einschließlich Flexbox, Grid, Custom Fonts, Hintergrundfarben und Verläufe — genau so gerendert, wie es in einem Browser aussehen würde.
Wie erzwinge ich einen Seitenumbruch an einer bestimmten Stelle?
Füge <!-- PAGE_BREAK --> als Kommentar an beliebiger Stelle in deinem HTML ein. Es wird in eine CSS page-break: always-Anweisung an dieser Stelle umgewandelt.