Wie Sie HTML in PDF konvertieren

· 5 Min. Lesezeit

<p>PDFs aus HTML zu erstellen ist nützlich für die Erstellung von Rechnungen, Berichten, Briefen, Zertifikaten und allen Dokumenten, bei denen Sie das Layout mit CSS steuern, aber als PDF verteilen möchten. Ein browserbasierter HTML-zu-PDF-Konverter verwendet die Rendering-Engine Ihres eigenen Browsers, sodass das Ergebnis dem entspricht, was Sie in der Live-Vorschau sehen, ohne Server-Uploads.</p> <h2>So konvertieren Sie HTML in PDF</h2>
  1. Fügen Sie Ihr HTML ein: Geben Sie Ihren HTML-Code einschließlich Inline-CSS oder <style>-Tags in den Editor ein. Der Code kann eine vollständige Seitenstruktur mit Überschriften, Tabellen, Bildern und Styling enthalten.
  2. Vorschau der Ausgabe: Eine Live-Vorschau zeigt genau, wie Ihr PDF aussehen wird, während Sie tippen. Passen Sie Ihr HTML und CSS an, bis die Vorschau Ihren Wünschen entspricht.
  3. Generieren und herunterladen: Klicken Sie auf die Generieren-Schaltfläche, um das PDF in Ihrem Browser zu erstellen, und laden Sie es dann sofort herunter.
<h2>Was Sie erstellen können</h2> <h2>Eine kurze Geschichte der HTML-zu-PDF-Konvertierung</h2> <p>Im frühen Web (1995-2005) erforderte das Erstellen eines PDFs aus HTML serverseitige Werkzeuge: Apache FOP (1999), PrinceXML (2002) oder wkhtmltopdf (2010), die alle auf einem Backend-Server liefen und das Hochladen von Inhalten erforderten. Die Ausgabequalität variierte stark, weil jede Rendering-Engine CSS unterschiedlich implementierte.</p> <p>Die browserseitige Konvertierung wurde 2014 mit Bibliotheken wie jsPDF und html2pdf.js praktisch, die HTML5 Canvas zum Rastern von Inhalten verwenden. Das Ergebnis war für einfache Dokumente anständig, scheiterte aber an komplexen Layouts und auswählbarem Text.</p> <p>Der Durchbruch war der Headless-Modus von Chromium (2017), der dieselbe Rendering-Engine offenlegte, die Chrome für normale Seiten verwendet. Puppeteer (Node.js, 2017) machte serverseitige Chromium-PDF-Generierung für Entwickler zugänglich. Browserbasierte Konverter verwenden jetzt die Print API (window.print()) mit @page-CSS-Regeln, derselbe Pfad, den der Headless-Modus von Chromium verwendet, was identische Ausgabe zwischen Vorschau und PDF ergibt.</p> <p>Im Jahr 2026 ist browserbasiertes HTML-zu-PDF die richtige Wahl für die meisten Dokumente. Serverseitiges Rendering ist nur sinnvoll für sehr große Dokumente (100+ Seiten), automatisierte Stapelverarbeitung oder wenn Sie PDFs aus mehreren Quellen zusammenführen müssen.</p> <h2>Styling-Tipps für PDF-Ausgabe</h2> <p>Verwenden Sie Inline-Stile oder <style>-Tags: Externe Stylesheets werden nicht geladen. Setzen Sie Ihr gesamtes CSS entweder inline auf Elemente oder in einen <style>-Block im HTML.</p> <p>Seitenränder festlegen: Verwenden Sie CSS @page { margin: 20mm; }, um den Weißraum um Ihren Inhalt im PDF zu steuern.</p> <p>Verwenden Sie druckfreundliche Einheiten: mm, cm und pt sind in PDFs vorhersehbarer als px oder rem. Verwenden Sie mm für Ränder und Abstände, die realen Dimensionen entsprechen müssen.</p> <p>Vermeiden Sie viewport-abhängige Layouts: Prozentuale Breiten und feste Pixelbreiten funktionieren am besten. Viewport-Einheiten (vw, vh) verhalten sich möglicherweise nicht wie erwartet in der PDF-Ausgabe.</p> <p>Seitenumbrüche steuern: Verwenden Sie page-break-before, page-break-after und page-break-inside (oder die neueren break-before, break-after, break-inside), um zu steuern, wo neue Seiten beginnen. break-inside: avoid verhindert, dass ein einzelner Block über Seiten hinweg geteilt wird.</p> <p>Verwenden Sie @media print für nur-PDF-Regeln: Jedes CSS innerhalb von @media print { ... } gilt nur beim Generieren des PDFs, nicht in der Vorschau. Nützlich zum Ausblenden von nur-Bildschirm-Elementen wie Navigationsleisten.</p> <h2>CSS-Druckmodus-Beispiel</h2> 
@page {
  size: A4;
  margin: 20mm 15mm;
}

@media print {
  .no-print { display: none; }
  h1 { page-break-before: always; }
  table { page-break-inside: avoid; }
  a { color: black; text-decoration: none; }
}

body {
  font-family: 'Helvetica', sans-serif;
  font-size: 11pt;
  line-height: 1.4;
  color: #1a1a1a;
}
<h2>Seitengrößen</h2> <p>Gängige @page size-Werte:</p> <p>Fügen Sie landscape für Querformat hinzu: size: A4 landscape.</p> <h2>Häufige Fallstricke</h2> <h2>Alternativen, die in Betracht gezogen werden sollten</h2> <p>Für alltägliche Geschäftsdokumente (Rechnungen, Berichte, Zertifikate) ist ein Browser-HTML-zu-PDF-Konverter schneller und genauso poliert.</p> <h2>Tipps</h2> <h2>Datenschutz und vertrauliche Dokumente</h2> <p>Der HTML-zu-PDF-Konverter läuft vollständig in Ihrem Browser. Das HTML, das Sie einfügen, die Bilder, die Sie einbetten, und das generierte PDF bleiben alle auf Ihrem Gerät. Nichts wird auf einen Server hochgeladen, protokolliert oder mit jemandem geteilt.</p> <p>Das ist wichtig, weil HTML-zu-PDF-Eingaben oft sensibel sind: Rechnungsdaten mit Kundennamen, Vertragsentwürfe mit Preisbedingungen, interne Berichte mit Finanzzahlen, Zertifikate mit persönlichen Informationen. Cloud-HTML-zu-PDF-Dienste senden standardmäßig Ihr HTML an ihren Server, generieren das PDF dort und senden es zurück. Einige behalten Eingaben zu «Verbesserungs»- oder Analysezwecken. Für Dokumente, die vertrauliche Informationen enthalten, ist ein browserbasierter Konverter die sicherere Wahl.</p> <p>Die browserbasierte Konvertierung funktioniert auch offline, sobald die Seite geladen ist, und ist schnell genug für sofortiges Feedback, während Sie am HTML iterieren.</p>

Diese Tools ausprobieren

HTML-zu-PDF-Konverter Markdown zu PDF HTML-Formatter

Häufig gestellte Fragen

Bewahrt das PDF mein CSS-Styling?

Ja. Der Konverter rendert Ihr HTML mit angewendetem CSS-Styling, einschließlich Farben, Schriftarten, Rändern und Layout. Das PDF sieht aus wie die gerenderte Webseite, nicht wie der rohe Quellcode.

Kann ich Bilder in das PDF einbinden?

Ja. Verwenden Sie Base64-codierte Bilder (Daten-URIs) für die zuverlässigsten Ergebnisse. Externe Bild-URLs können funktionieren, wenn sie erreichbar und CORS-aktiviert sind.

Wird mein HTML auf einen Server hochgeladen?

Nein. Die Konvertierung erfolgt vollständig in Ihrem Browser. Ihr Code und das erzeugte PDF verlassen Ihr Gerät nie.

Welche CSS-Funktionen werden unterstützt?

Standard-CSS einschließlich Layouts, Farben, Schriftarten, Hintergründe, Rahmen und Tabellen wird gut unterstützt. Erweiterte Funktionen wie CSS Grid, komplexe Animationen und einige Flexbox-Sonderfälle haben möglicherweise eingeschränkte Unterstützung.