HTML zu PDF: Stilbehandlung, CSS und Seitenlayout

Warum HTML zu PDF

Webseiteninhalte zum Drucken, Archivieren oder Offline-Teilen lassen sich am besten in PDF konvertieren. Die Konvertierung von HTML zu PDF macht aus einer dynamischen Webseite ein festes Dokument.

Häufige Fälle:

• Webartikel speichern
• Online-Rechnungen/Quittungen erstellen
• Berichte exportieren
• E-Books erstellen

Methoden der HTML-zu-PDF-Konvertierung

Browser-Druck

Die einfachste Methode: im Browser Strg+P, Ziel „Als PDF speichern“. Die Rendering-Engine des Browsers wandelt die Webseite direkt in PDF um.

Vorteile: kostenlos, gute CSS-Unterstützung. Nachteile: manuelle Bedienung, nicht für Stapelverarbeitung; interaktive Elemente der Webseite können stören.

Online-Werkzeug

Mit dem HTML-zu-PDF-Werkzeug:

1. Web-URL eingeben oder HTML einfügen
2. Werkzeug rendert und konvertiert
3. PDF herunterladen

Verarbeitung im Browser, Inhalt wird nicht hochgeladen.

Programmierbibliotheken

Für Entwicklungsszenarien Bibliotheken verwenden:

• JavaScript: Puppeteer (headless Chrome), jsPDF
• Python: pdfkit, WeasyPrint
• Serverseitig: wkhtmltopdf

CSS-Stilbehandlung

CSS-Unterstützungsgrad

Verschiedene Konvertierungs-Engines unterstützen CSS unterschiedlich:

• Browser-Engine (Chrome): vollständigste Unterstützung, flex und grid funktionieren
• wkhtmltopdf: basiert auf altem WebKit, unterstützt kein neues CSS
• WeasyPrint: unterstützt den Großteil von CSS 2.1, Teile von CSS 3

Vor der PDF-Konvertierung die unterstützten CSS-Eigenschaften der Engine prüfen.

Druckspezifisches CSS

Mit @media print druckspezifische Stile schreiben:

@media print {
  .no-print { display: none; }  /* Nicht zu druckende Elemente ausblenden */
  body { font-size: 12pt; }     /* Für Druck pt statt px verwenden */
  a { text-decoration: none; }  /* Linkunterstreichungen entfernen */
}

Interaktive Elemente ausblenden

Navigation, Schaltflächen und Werbung der Webseite sind im PDF sinnlos. Mit @media print ausblenden:

@media print {
  nav, footer, .ad, .sidebar { display: none; }
}

Farbbehandlung

• Bildschirm verwendet RGB, PDF-Druck verwendet CMYK
• Hintergrundfarbe wird standardmäßig nicht gedruckt, zum Erzwingen -webkit-print-color-adjust: exact setzen
• Dunkle Hintergründe verbrauchen beim PDF-Druck viel Tinte, auf helle Farben wechseln

Seitenumbruchkontrolle

Seitenumbrüche

Seitenumbruch mit CSS steuern:

h1 { page-break-before: always; }  /* Seitenumbruch vor Überschrift */
table { page-break-inside: avoid; } /* Tabelle nicht teilen */
img { page-break-inside: avoid; }   /* Bild nicht teilen */

Seitenumbruch-Eigenschaften

• page-break-before: Seitenumbruch vor dem Element
• page-break-after: Seitenumbruch nach dem Element
• page-break-inside: kein Seitenumbruch innerhalb des Elements

Waisen- und Hurenkinder vermeiden

p { orphans: 3; widows: 3; }  /* Mindestens 3 Zeilen am Absatzende/-anfang */

Kopf- und Fußzeilen

Browser-Druck

Im Druckdialog des Browsers Kopf- und Fußzeilen einstellen (Seitenzahlen, Titel, URL). Aber begrenzte Gestaltungsmöglichkeiten.

Bibliotheksgenerierung

Puppeteer und andere Bibliotheken ermöglichen individuelle Kopf- und Fußzeilen:

const pdf = await page.pdf({
  displayHeaderFooter: true,
  headerTemplate: '<div style="font-size:9pt;">Berichtstitel</div>',
  footerTemplate: '<div>Seite <span class="pageNumber"></span></div>',
  margin: { top: '60px', bottom: '60px' }
});

Bildbehandlung

Bildpfade

Bilder in HTML mit absolutem Pfad oder base64:

• Absoluter Pfad: <img src="https://example.com/img.png">
• base64: <img src="data:image/png;base64,...">
• Relativer Pfad: bei der PDF-Konvertierung möglicherweise nicht gefunden, absoluten Pfad oder base64 verwenden

base64-Einbettung

Bei kleinen Bildern base64 einbetten, um Pfadprobleme zu vermeiden:

<img src="data:image/png;base64,iVBORw0KGgo...">

Bei großen Bildern vergrößert base64 die HTML-Größe, abwägen.

Bildschärfe

• Hochauflösende Bilder verwenden
• Bilder nicht über die Originalgröße hinaus vergrößern
• Vektorgrafiken (SVG) sind in PDF am schärfsten

Schriftbehandlung

Schriftladung

Webseiten verwenden Web-Schriften (Google Fonts usw.), bei der PDF-Konvertierung müssen die Schriften vollständig geladen sein. Bei Bibliothekskonvertierung sicherstellen, dass die Schriften vor der Konvertierung geladen sind.

Schrifteinbettung

PDF muss Schriften einbetten, um auf jedem Gerät einheitlich anzuzeigen. Konvertierungswerkzeuge betten sie in der Regel automatisch ein.

Universelle Schriften

Universelle Schriften (Arial, Times New Roman, SimSun) verwenden, um Schriftprobleme zu vermeiden.

Konvertierung mit DocsAll

HTML-zu-PDF-Werkzeug:

1. Web-URL eingeben oder HTML-Code einfügen
2. Werkzeug rendert die Webseite
3. In PDF konvertieren
4. Herunterladen

Verarbeitung im Browser, Inhalt wird nicht zum Server hochgeladen.

Häufige Fragen

Stile verloren

• CSS nicht geladen (externer CSS-Pfad falsch)
• Nicht unterstützte CSS-Eigenschaft verwendet
• Lösung: Inline-CSS verwenden, unterstützte CSS-Eigenschaften nutzen

Seitenumbruch schneidet Inhalt

• Keine Seitenumbruchkontrolle eingestellt
• Lösung: page-break-inside: avoid hinzufügen

Bilder werden nicht angezeigt

• Pfad falsch
• Cross-Origin-Beschränkung
• Lösung: absoluten Pfad oder base64 verwenden

Chinesische Zeichen unleserlich

• Schrift unterstützt kein Chinesisch
• Codierung nicht UTF-8
• Lösung: chinesischfähige Schrift verwenden, UTF-8-Codierung im HTML deklarieren

Hintergrundfarbe nicht gedruckt

• Browser druckt standardmäßig keine Hintergründe
• Lösung: in CSS -webkit-print-color-adjust: exact setzen, oder im Druckdialog „Hintergrundgrafiken“ anhaken

Seite zu breit

• Webseitenbreite überschreitet die PDF-Seite
• Lösung: CSS-Breite anpassen oder auf Querformat wechseln

Zusammenfassung

Bei der Konvertierung von HTML zu PDF geht es um CSS-Stilbehandlung und Seitenumbruchkontrolle. Mit @media print Druckstile schreiben und interaktive Elemente ausblenden. Seitenumbruch mit page-break-Eigenschaften steuern. Bilder mit absolutem Pfad oder base64 verwenden. Das DocsAll HTML-zu-PDF-Werkzeug läuft im Browser, der Inhalt bleibt lokal.