HTML zu PDF: Schwieriger als es sein sollte
Webseiten in PDF zu konvertieren scheint einfach. Hier erfährst du, warum es das nicht ist und wie du gute Ergebnisse erzielst.
Du hast eine schöne Webseite. Du brauchst sie als PDF. Strg+P, als PDF speichern. Fertig?
Manchmal. Aber oft hat das Ergebnis kaputte Layouts, fehlende Bilder, seltsame Seitenumbrüche und Überschriften, die mitten im Satz abgeschnitten sind.
HTML und PDF sind grundlegend verschieden. Sie zusammen zum Laufen zu bringen erfordert Mühe.
Warum es kompliziert ist
HTML ist fließend. Inhalt fließt, um verfügbaren Platz zu füllen. Responsiv. Flexibel.
PDF ist fix. Spezifische Seitendimensionen. Exakte Positionierung. Nichts fließt.
Konvertieren bedeutet, etwas zu nehmen, das fürs Anpassen designt ist, und es auf starre Seiten zu zwingen.
Seitenumbrüche sind der Feind
Dein schöner Absatz wird über zwei Seiten aufgeteilt. Der Tabellenkopf ist auf Seite 3, die Daten beginnen auf Seite 4.
CSS hat page-break-before, page-break-after und page-break-inside Eigenschaften. Sie sollen das steuern.
h2 {
page-break-after: avoid;
}
table {
page-break-inside: avoid;
}
„Sollen", weil die Browser-Unterstützung variiert. Teste gründlich.
Was rendert und was nicht
Web-Fonts: Funktionieren manchmal, manchmal nicht. Teste mit tatsächlichen Fonts, nicht Fallbacks.
Hintergrundfarben: Oft standardmäßig ausgeschlossen (spart Tinte). Prüfe „Hintergründe drucken"-Einstellungen.
Bilder: Externe Bilder laden möglicherweise nicht. CORS-Probleme erscheinen zur Konvertierungszeit.
JavaScript-gerenderte Inhalte: Wenn Inhalte via JS laden, existieren sie möglicherweise nicht, wenn das PDF die Seite erfasst.
Animationen und Übergänge: Weg. PDF ist statisch.
Druck-Stylesheets
CSS hat einen Medientyp für Druck:
@media print {
.no-print {
display: none;
}
body {
font-size: 12pt;
}
a::after {
content: " (" attr(href) ")";
}
}
Verstecke Navigation, passe Schriften an, zeige URLs für Links. Designe speziell für Druck-Ausgabe.
Verschiedene Konvertierungsmethoden
Browser-Druck zu PDF: Gut für einmalige Konvertierungen. Ergebnisse variieren je Browser.
Headless-Browser (Puppeteer, Playwright): Programmatische Kontrolle. Konsistente Ergebnisse. Erfordert Setup.
PDF-Bibliotheken (wkhtmltopdf, WeasyPrint): Dedizierte Tools. Bessere Kontrolle über Ausgabe.
Online-Dienste: HTML hochladen, PDF erhalten. Praktisch für gelegentliche Nutzung.
Jedes hat Kompromisse in Qualität, Geschwindigkeit und Kontrolle.
Tipps für bessere Ergebnisse
Verwende feste Breiten. Responsive Layouts verursachen unvorhersehbare Ergebnisse. Setze eine spezifische Breite für PDF-Ausgabe.
Vereinfache Layouts. Komplexes CSS Grid und Flexbox können brechen. Einfachere Layouts konvertieren zuverlässiger.
Bette Fonts ein. Verlass dich nicht darauf, dass System-Fonts verfügbar sind.
Teste früh. Baue nicht die ganze Seite und versuche dann PDF-Konvertierung. Teste während du baust.
Setze explizite Seitengröße. PDF denkt in Seiten. Sag ihm, welche Größe.
@page {
size: A4;
margin: 1cm;
}
Wann natives PDF verwenden
Wenn du präzise Kontrolle brauchst – Verträge, Rechnungen, Berichte mit exakter Formatierung – erwäge, PDF direkt zu generieren statt HTML zu konvertieren.
Bibliotheken wie PDFKit, ReportLab oder iText erstellen PDF ohne die HTML-Konvertierungsschicht.
Mehr Arbeit, mehr Kontrolle, vorhersehbarere Ergebnisse.
HTML-zu-PDF-Konvertierung funktioniert, aber sie erfordert Aufmerksamkeit für Druck-Styles, Seitenumbrüche und die Unterschiede zwischen Web- und Druck-Medien. Teste gründlich und setze Erwartungen entsprechend.