HTML in PDF umwandeln

Was die Seite erreichen darf – und was CSS steuert

Die Umwandlung hat keinen Netzwerkzugriff und führt keine Skripte aus – beides sind Sicherheitsentscheidungen, keine fehlenden Funktionen. Ein Konverter, der alles abruft, was eine eingereichte Seite anfordert, ließe sich bereitwillig auf Adressen richten, die nur unser Server sehen kann, und einer, der Skripte ausführt, würde fremden Code ausführen. Ein Stylesheet, das auf ein CDN verlinkt, kommt also nicht an, ein Bild mit gewöhnlicher Webadresse wird nicht geladen, ein Webfont wird stillschweigend ersetzt, und eine Seite, die sich per JavaScript selbst aufbaut, wird so umgewandelt, wie das Markup vor dem Ausführen von irgendetwas aussieht. Die Lösung ist immer dieselbe: CSS inline in einem style-Block einbinden und Bilder als Data-URIs einbetten. Browser bieten das direkt an – „Seite speichern unter → Webseite, komplett“ in Firefox oder „Als MHTML speichern“ –, und eine als einzelne Datei gespeicherte Seite wird originalgetreu umgewandelt.

Was das Ergebnis tatsächlich bestimmt, ist Druck-CSS – das Zweite, was man wissen sollte. Die Seite wird so gesetzt, als würde sie gedruckt, deshalb greift ein @media print-Block, ein gewöhnliches Bildschirm-Stylesheet unter Umständen aber nicht – darum wird eine Seite mit einer Druckregel, die ihre Navigation ausblendet, wunderbar umgewandelt, und eine ohne bringt das ganze Drumherum der Website mit. @page steuert das Papier: Format, Ausrichtung und Ränder werden daraus gelesen. break-before, break-after und break-inside: avoid bestimmen, wo Seiten umbrechen – ob eine Tabelle nicht geteilt werden darf oder ein Abschnitt auf einer neuen Seite beginnen muss, haben Sie also vollständig selbst in der Hand.

Hintergründe sind das klassische Versäumnis. Browser drucken Hintergrundfarben und -bilder standardmäßig nicht, ein dunkler Header kann also weiß herauskommen, wenn das Stylesheet nicht -webkit-print-color-adjust: exact angibt – eine Zeile, und sie macht den Unterschied zwischen einem Dokument im eigenen Design und einem nackten. Text bleibt echter Text, Links bleiben funktionierende Links, und Überschriften können zu PDF-Lesezeichen werden, wo das Markup echte Überschriftenelemente verwendet.

Ist unser Server nicht erreichbar, sagt die Seite das und baut das Dokument lokal neu auf. Dabei bleiben Text, Bilder und einfaches Layout erhalten, während alles vereinfacht wird, was einen echten Layout-Durchlauf braucht – darunter Grid, Flexbox, Floats und Positionierung. Ein einfaches Dokument wird nahezu identisch umgewandelt, ein gestaltetes nicht.

Wenn Sie etwas anderes brauchen

Um eine Live-URL umzuwandeln – was diese Seite bewusst nicht kann –, läuft dasselbe Rendering wie auf unserem Server auch auf Ihrem Rechner: chrome --headless --disable-gpu --print-to-pdf=out.pdf https://example.com lädt die Seite mit vollem Netzwerkzugriff, samt Skripten. Das ist der ganze Unterschied, und genau deshalb greift man dazu.

Für echte Kontrolle über Kopf- und Fußzeilen, Seitenzahlen und Ränder setzen WeasyPrint und Prince die CSS-Paged-Media-Spezifikation richtig um: laufende Kopfzeilen aus @top-center, Seitenzähler, Fußnoten und Querverweise, die zu Seitenzahlen aufgelöst werden. WeasyPrint ist kostenlos und wird von den meisten Dokumentations-Pipelines verwendet. Chrome unterstützt davon fast nichts – ein generierter Bericht mit „Seite 3 von 12“ in der Fußzeile braucht also eines der beiden statt dieses Tools.