HTML in PDF umwandeln: Print-CSS, window.print() | We.Inc
Mach aus HTML eine saubere PDF: über den Druckdialog speichern, Print-CSS mit @page und break-inside schreiben, window.print() aufrufen oder auf einem Server rendern. Mit Print-CSS-Builder.
Am schnellsten wird eine Webseite über den Druckdialog des Browsers zur PDF: öffnen, PDF als Ziel wählen und speichern. Um das Aussehen der PDF zu steuern, ergänzt du Print-CSS mit @media print und @page für Papierformat und Ränder. Für automatisch erzeugte PDFs renderst du die Seite mit einem Headless-Browser wie Puppeteer oder Playwright.
Wege, aus HTML eine PDF zu machen
Methode
Läuft wo
Text markierbar
Am besten für
Druckdialog, als PDF speichern
Jeder Desktop-Browser
Ja
Einzelne Kopien einer Seite
window.print()-Button
Im Browser des Besuchers
Ja
Rechnungen, Quittungen, Tickets
Puppeteer page.pdf()
Node.js steuert Chrome
Ja
Automatisierte Berichte auf einem Server
Playwright page.pdf()
Ein Playwright-Skript steuert einen Browser
Ja
Automatisierte PDFs in einem bestehenden Test-Setup
Im Browser des Besuchers
Nein, die Seite wird zum Bild
Schnelle Downloads im Client
jsPDF
Im Browser des Besuchers
Ja, für Text, den du zeichnest
Eine PDF im Code aus Daten aufbauen
Jede Methode auf dieser Seite bittet letztlich eine Browser-Engine, die Seite auf Papier zu setzen, daher verbessert gutes Print-CSS sie alle. Bau dir unten ein Ausgangs-Stylesheet für den Druck und wähle dann den Umwandlungsweg, der dazu passt, wer auf den Knopf drückt: eine Person, deine Seite oder ein Server.
Wähle Papierformat, Ausrichtung und Rand für die @page-Regel.
Hake die Extras an, die du brauchst: Navigation ausblenden, Blöcke zusammenhalten, Linkadressen drucken, Hintergrundfarben behalten.
Kopiere das CSS in dein Stylesheet; es greift nur beim Drucken.
Öffne die Druckvorschau in deinem Browser und wähle PDF als Ziel, um das Ergebnis zu prüfen.
Nutze die Druckvorschau als Testumgebung. Sie aktualisiert sich bei jeder CSS-Änderung und kostet nichts.
Blende Navigation, Cookie-Banner und Seitenleisten im Druck aus; auf Papier kann niemand darauf klicken.
Halte Tabellen, Abbildungen und Codeblöcke mit break-inside: avoid zusammen.
Browser lassen Hintergrundfarben beim Drucken standardmäßig weg. print-color-adjust: exact bittet sie, deine zu behalten, aber die Druckeinstellungen des Besuchers haben trotzdem Vorrang.
Nutze pt, mm oder in für Druckgrößen, wenn du exakte physische Maße brauchst.
Häufige Fragen
Wie speichere ich eine Webseite ohne Tools als PDF?
Öffne den Druckdialog des Browsers über das Menü oder das Tastenkürzel und wähle dann die PDF-Option in der Ziel- oder Druckerliste. Wie sie genau heißt, hängt von Browser und Betriebssystem ab.
Wie füge ich meiner Seite einen Button zum PDF-Download hinzu?
Die einfachste ehrliche Lösung ist ein Button, der window.print() aufruft und denselben Dialog öffnet, in dem der Besucher als PDF speichern kann. Er braucht keine Bibliothek, lässt den Text markierbar und nutzt dein Print-CSS.
Wie verhindere ich, dass eine Tabelle über zwei Seiten umbricht?
Setze break-inside: avoid auf die Tabelle oder bei langen Tabellen auf ihre Zeilen. Das ältere page-break-inside: avoid wird als Alias behandelt und funktioniert daher in älteren Stylesheets weiterhin.
Kann ich das Papierformat per CSS festlegen?
Ja. @page { size: A4 portrait; margin: 15mm; } legt Größe und Ränder der Seitenbox fest. Puppeteer nutzt das nur, wenn preferCSSPageSize auf true steht; andernfalls entscheidet seine eigene format-Option, standardmäßig Letter.
Warum erzeugt html2pdf.js unscharfe oder riesige PDFs?
Laut README rendert es den Inhalt in ein Bild und setzt dieses Bild in die PDF, daher ist der Text weder markierbar noch durchsuchbar, und die Dateien werden groß. Nutze das Drucken oder einen Headless-Browser, wenn es auf den Text ankommt.
Print-CSS ist die Grundlage
Mit einem @media print-Block gestaltest du die Seite fürs Papier um, ohne das Bildschirmdesign anzufassen. Blende aus, was auf Papier keinen Sinn ergibt, verbreitere die Inhaltsspalte und setze eine gut lesbare Schriftgröße.
Die @page-Regel steuert die Seitenbox selbst: Größe, Ränder und Ausrichtung, mit :first, :left und :right, um bestimmte Seiten anders zu behandeln. MDN führt @page seit Dezember 2024 als Baseline newly available, wobei sich einige Teile zwischen Browsern noch unterscheiden.
Wann du auf einem Server renderst
Wenn PDFs ohne einen Menschen entstehen müssen, etwa ein nächtlicher Bericht oder eine per E-Mail verschickte Rechnung, nutze einen Headless-Browser. page.pdf() von Puppeteer druckt mit dem Medientyp print, nimmt Optionen wie format, margin und printBackground und kann direkt in einen Dateipfad speichern.
Serverseitiges Rendern liefert jedes Mal dasselbe Ergebnis, weil du Browserversion und Schriften kontrollierst. Es bedeutet aber auch, dass du diesen Browser betreiben und absichern musst, also nimm das nur auf dich, wenn ein Druck-Button nicht reicht.
Print-CSS-Referenz
Regeln und Eigenschaften, die gedruckte Seiten formen
CSS
Werte
Einsatz
@media print { }
Beliebige Regeln
Styles, die nur beim Drucken oder Speichern als PDF gelten
@page { size }
A5, A4, A3, B5, B4, letter, legal, ledger oder Längen; portrait oder landscape
Papierformat und Ausrichtung
@page { margin }
Längen
Ränder jeder Seite
@page :first
Pseudoklasse
Andere Ränder auf der ersten Seite
auto, avoid, avoid-page, avoid-column
Einen Block auf einer Seite halten
break-before / break-after
auto, avoid, page, left, right
Einen Umbruch an einem Block erzwingen oder verhindern
economy, exact
Ob der Browser Farben und Hintergründe weglassen darf
Druckbeispiele zum Kopieren
Ein Button zum Drucken oder Speichern als PDF
window.print() öffnet den Druckdialog und blockiert die Seite, bis er geschlossen wird. Die Klasse hält den Button selbst vom Papier fern.
Rechnungslayout, das jede Rechnung auf einer neuen Seite beginnt
break-after: page nach jeder Rechnung sorgt für eine Rechnung pro Blatt, wenn mehrere zusammen gedruckt werden.
Die Seite kurz vor dem Drucken vorbereiten
beforeprint und afterprint feuern rund um den Dialog, was nützlich ist, um eingeklappte Abschnitte aufzuklappen.
Serverseitige PDF mit Puppeteer
preferCSSPageSize lässt deine @page-Größe Vorrang vor der format-Option haben; printBackground behält Hintergründe.
Print-CSS-Builder
Papierformat
Ausrichtung
Hochformat
Querformat
Rand: {n} mm
Navigation, Footer und Seitenleisten ausblenden
Tabellen, Abbildungen und Code auf einer Seite halten