HTML zu PDF mit dem Browser-Druckdialog

Code-Beispiel

<button onclick="window.print()">Als PDF speichern</button>

<style>
  @media print {
    .no-print { display: none; }
    @page { size: A4; margin: 20mm; }
    body { font-family: sans-serif; }
  }
</style>

<script>
  // Optional: direkt beim Laden den Druckdialog oeffnen
  // window.addEventListener("load", () => window.print());
</script>

Hinweise

Der Browser-Druckdialog ist die einzige Loesung im Vergleich, die keine Abhaengigkeit und keinen Server braucht. Der Aufruf von window.print() oeffnet den nativen Dialog, in dem als Ziel Als PDF speichern zur Verfuegung steht. Weil die Engine des Browsers rendert, ist die CSS-Treue exzellent und entspricht genau der Bildschirmansicht inklusive Flexbox, Grid und Webfonts. Die Steuerung des Druckbilds laeuft ueber den @media print-Block: Dort blendest du Navigation und Buttons aus, setzt ueber @page das Format und die Raender und steuerst Seitenumbrueche mit break-inside und break-after. Der Preis dieser Einfachheit ist fehlende Automatisierung. Die Ausgabe haengt vom Nutzer ab, der den Dialog bestaetigt und Optionen waehlt, und Kopf- und Fusszeilen des Browsers lassen sich programmatisch kaum kontrollieren. Fuer serverseitige Massenerzeugung ist das ungeeignet. Fuer einzelne Belege, Tickets oder Druckansichten direkt im Nutzerkontext ist es jedoch die schlankeste und treueste Variante ueberhaupt.