HTML zu PDF konvertieren –
Der ultimative Leitfaden 2026
HTML-Code und HTML-Dateien kostenlos in PDF umwandeln: Für Entwickler, Designer und alle, die Rechnungen, Berichte oder Webseiten als PDF exportieren möchten – direkt im Browser.
1 Warum HTML in PDF umwandeln?
Wer nach „HTML zu PDF konvertieren kostenlos", „Webseite als PDF speichern" oder „HTML Datei zu PDF" sucht, steht vor einer Aufgabe, die in Entwicklung, Design und Unternehmensalltag täglich vorkommt: Ein HTML-Dokument soll als portables, unveränderliches PDF-Dokument weitergegeben werden.
HTML-Seiten sind von Natur aus dynamisch und plattformabhängig – sie sehen je nach Browser, Betriebssystem und Bildschirmauflösung unterschiedlich aus. Ein PDF hingegen ist ein statischer Snapshot: Was beim Erstellen sichtbar ist, ist auf jedem Gerät und in jedem PDF-Reader identisch.
Das Werkix HTML-zu-PDF-Tool ermöglicht genau das – direkt im Browser, ohne Server, ohne Installation und ohne Upload. Du kannst entweder HTML-Code direkt einfügen oder eine .html-Datei hochladen und erhältst sofort eine downloadbare PDF.
2 Zahlen & Fakten
HTML-Dateien sind reiner Text und damit extrem kompakt. 5 MB entsprechen in der Praxis einem sehr langen, komplexen HTML-Dokument. Selbst vollständige Webseiten mit umfangreichem Inline-CSS liegen meist unter 500 KB. Problematisch wird es nur, wenn Bilder als Base64 Data-URI eingebettet sind – diese können die Dateigröße schnell erhöhen.
html2canvas (v1.4.1) und jsPDF (v2.5.1) – beide quelloffen und etabliert. html2canvas rendert das HTML in ein Canvas-Element, jsPDF konvertiert dieses in ein PDF.3 Anwendungsfälle für Entwickler & Designer
4 Schritt-für-Schritt: HTML zu PDF mit Werkix
HTML zu PDF – Jetzt ausprobieren
Code einfügen, PDF laden. Keine Installation, kein Upload.
5 CSS & Styling: Was wird in der PDF unterstützt?
Der entscheidende Vorteil des Werkix-Tools gegenüber einfachen Text-Konvertern: CSS-Styles werden vollständig übernommen – sofern sie eingebettet sind. Hier ist eine vollständige Übersicht:
6 HTML-Code direkt eingeben – So geht's
Das Tool bietet zwei Eingabe-Modi: HTML-Code direkt einfügen oder eine .html-Datei hochladen. Der Code-Modus ist besonders praktisch für Entwickler, die HTML-Snippets oder Templates testen möchten. Hier ein Beispiel für eine einfache Rechnung:
<!DOCTYPE html> <html> <head> <style> body { font-family: Arial, sans-serif; padding: 40px; } h1 { color: #15803d; border-bottom: 2px solid #15803d; } table { width: 100%; border-collapse: collapse; margin-top: 20px; } th { background: #0f1523; color: white; padding: 10px; } td { padding: 10px; border-bottom: 1px solid #eee; } .total { font-weight: bold; font-size: 1.2em; } </style> </head> <body> <h1>Rechnung #2025-001</h1> <table> <tr><th>Position</th><th>Preis</th></tr> <tr><td>Webdesign</td><td>800,00 €</td></tr> <tr class="total"><td>Gesamt</td><td>952,00 € (inkl. MwSt.)</td></tr> </table> </body> </html>
Füge diesen Code ins Tool ein, klicke auf „In PDF umwandeln" – fertig ist die Rechnung als PDF. Das eingebettete CSS wird vollständig übernommen: Schriften, Farben, Tabellen-Layout und Abstände erscheinen in der PDF exakt wie im Browser.
7 Grenzen des Browser-Konverters & wann Alternativen sinnvoll sind
Es ist wichtig, ehrlich über die Einschränkungen eines browserbasierten HTML-zu-PDF-Konverters zu sein:
Was nicht funktioniert:
Externe Bilder: Bilder, die über src="https://..." eingebunden sind, können aufgrund von Browser-Sicherheitsrichtlinien (Same-Origin Policy und CORS) nicht geladen werden. Lösung: Bilder als Base64 Data-URI einbetten.
JavaScript-Interaktivität: Dynamisch generierte Inhalte (z. B. durch React, Vue oder jQuery erzeugte Elemente) müssen bereits gerendert sein, wenn der Canvas-Snapshot erstellt wird. Single-Page-Apps funktionieren in der Regel nicht zuverlässig.
Komplexe Mehrseiten-Layouts: Das Tool schneidet lange Seiten automatisch in DIN-A4-Seiten, aber feste Positionen (position: fixed), Sticky-Elemente und CSS-Breakpoints können dabei Probleme verursachen.
Wann sind serverseitige Lösungen besser?
Für automatisierte PDF-Generierung im Backend (z. B. hunderte Rechnungen täglich) sind serverseitige Lösungen wie Puppeteer (Node.js), wkhtmltopdf oder WeasyPrint deutlich besser geeignet. Das Werkix-Tool ist für manuelle, gelegentliche Konvertierungen optimiert – nicht für Automatisierungspipelines.
8 Browser-Druckfunktion: Die einfachste Alternative
Für Webseiten, die du im Browser geöffnet hast, ist die Browser-Druckfunktion oft der einfachste Weg zu einem PDF – besonders wenn externe Ressourcen (Bilder, Schriften) bereits geladen sind.
| Betriebssystem / Browser | Tastenkürzel | Vorgehen |
|---|---|---|
| 🪟 Windows (Chrome/Firefox/Edge) | Strg + P | Drucker „Als PDF speichern" wählen → Speichern |
| 🍎 macOS (Safari/Chrome) | ⌘ + P | PDF-Dropdown unten links → „Als PDF sichern" |
| 📱 iPhone (Safari) | Teilen-Icon | „Als PDF" im Teilen-Menü → Dateien speichern |
| 🤖 Android (Chrome) | Menü (⋮) | „Teilen" → „Drucken" → PDF speichern |
9 Methoden-Vergleich: HTML zu PDF
| Methode | CSS-Support | Extern. Bilder | Datenschutz | Kosten |
|---|---|---|---|---|
| ✅ Werkix (lokal) | ✅ Inline+Style | ❌ | ✅ 100% lokal | Kostenlos |
| Browser-Druck (Strg+P) | ✅ Vollständig | ✅ Ja | ✅ Lokal | Kostenlos |
| Puppeteer (Node.js) | ✅ Vollständig | ✅ Ja | ✅ Server | Technisch anspruchsvoll |
| wkhtmltopdf | ✅ Gut | ✅ Ja | ✅ Lokal | Kostenlos (Installation) |
| PDF-API (pdfshift.io etc.) | ✅ Vollständig | ✅ Ja | Server-Upload | Kostenpflichtig |
10 Datenschutz & DSGVO: Besonders wichtig bei HTML
HTML-Dokumente können hochsensible Daten enthalten: Rechnungen mit Kundenadressen und Bankdaten, interne Berichte mit Umsatzzahlen, E-Mails mit persönlichen Informationen. Wer solche Dokumente auf externe Konverter-Server hochlädt, riskiert Datenschutzverletzungen.
Das Werkix HTML-zu-PDF-Tool verarbeitet alle Daten vollständig lokal in deinem Browser. Das HTML verlässt deinen Computer zu keinem Zeitpunkt. Die technische Umsetzung: Das HTML wird in einem sandboxed iFrame gerendert, html2canvas erstellt einen Canvas-Screenshot, jsPDF generiert die PDF – alles im Arbeitsspeicher deines Browsers, ohne Netzwerkkommunikation.
Das Tool verwendet ausschließlich client-seitige JavaScript-Bibliotheken. Es gibt keine Server-Kommunikation für die Konvertierung selbst. Der gesamte Prozess findet im Browser-Arbeitsspeicher statt.
11 Profi-Tipps für Entwickler
base64.b64encode(open('logo.png','rb').read()).decode(), dann als src="data:image/png;base64,..." einbetten.page-break-before: always oder break-before: page, um gezielte Seitenumbrüche zu setzen. In kombination mit break-inside: avoid für Tabellen und Boxen, die nicht aufgeteilt werden sollen.@media print und @page CSS-Regeln für druckoptimiertes Layout.@page lassen sich automatische Seitenzahlen hinzufügen: @page { @bottom-right { content: counter(page) ' von ' counter(pages); } }. Wird von modernen Browsern bei der Druckfunktion unterstützt.12 Häufig gestellte Fragen (FAQ)
HTML zu PDF – Sofort loslegen
Code einfügen, PDF laden – in Sekunden, kostenlos und lokal.