Kostenloser HTML-zu-PDF-Konverter

Über die HTML-zu-PDF-Konvertierung

PDF begann als John Warnocks „Camelot"-Projekt bei Adobe 1991, ein interner Vorschlag, ein „gemeinsames Dateiformat zu schaffen, das Dokumente aus jeder Anwendung erfassen, elektronische Versionen dieser Dokumente überallhin senden und sie auf jeder Maschine anzeigen und drucken kann". Warnock war Mitgründer von Adobe und Erfinder (mit Charles Geschke) von PostScript; das Ziel von Camelot war, die Drucktreue-Garantien von PostScript auch auf dem Bildschirm wie auf Papier funktionieren zu lassen. Acrobat 1.0 und PDF 1.0 wurden im Juni 1993 gestartet, mit dem ersten kommerziellen Acrobat-Reader für 50 $. PDF war fünfzehn Jahre lang ein von Adobe kontrolliertes proprietäres Format; Adobe gab die Spec 2008 an die ISO als ISO 32000-1:2008 (PDF 1.7 als offener Standard veröffentlicht); das große PDF 2.0 (ISO 32000-2) kam 2017 mit Revisionen bis 2020. Adobe verzichtete im April 2023 auf seine verbleibenden Patentrechte, womit PDF weltweit vollständig patentfrei wurde. PDF ist nun das universelle portable Dokumentformat, jedes Betriebssystem liest es nativ, jeder Drucker versteht es, jedes Rechtssystem akzeptiert es. Das ganze Gebäude ruht auf festposition-basiertem Layout im PostScript-Stil: jedes Element auf einer PDF-Seite hat eine absolute (x, y)-Position, an der Grundlinie des Seiten-Koordinatensystems ausgerichtet, mit Text kodiert als Schriftart- + Glyph-Referenzen und Grafiken als Pfadbefehle.

Der grundlegende Unterschied zwischen HTML und PDF macht die HTML-zu-PDF-Konvertierung schwieriger, als sie aussieht. HTML ist reflow-basiert, Inhalt passt sich dem Viewport an, Absätze umbrechen beim Resize, das Layout ändert sich beim Zoomen. PDF ist fest-layoutiert, jedes Element ist absolut positioniert, Seitengrenzen sind explizit, kein Reflow tritt jemals auf. Die Konvertierung von einem zum anderen erzwingt eine Reihe harter Entscheidungen: wie man lange Seiten umbricht, wo eingebettete Schriften im resultierenden PDF leben, wie Vektorgrafiken erhalten bleiben, ob Links klickbar bleiben. Es gibt für die meisten dieser Fragen keine objektiv richtige Antwort, das richtige Verhalten hängt vom Anwendungsfall ab.

Zwei JavaScript-Ansätze: Raster vs Vektor

Browser-basierte HTML-zu-PDF-Konvertierung hat zwei Architekturen. html2pdf.js (Erik Koopmans, von diesem Tool verwendet) wickelt zwei zugrundeliegende Bibliotheken ein, html2canvas (das ein HTML-Element zu einem Canvas-Bild rendert, indem es das Layout aus dem DOM liest und neu zeichnet) und jsPDF (das ein PDF aus Primitiven aufbaut). Die Pipeline: HTML → Canvas-Bild → Bild in PDF einbetten. Das Ergebnis ist pixel-genau, was Sie in der Vorschau sehen, ist das, was Sie im PDF bekommen, aber nur Raster: der Text im PDF ist ein Bild, kein auswählbarer Text. Sie können nicht nach Wörtern im PDF suchen, Sie können nicht daraus kopieren, Screen Reader können es nicht lesen. Für Berichte, Zertifikate, Rechnungen und Einmal-Dokumente ist das akzeptabel; für Dokumente, deren Text suchbar oder zugänglich sein muss, ist das eine signifikante Einschränkung. Die alternative Architektur verwendet jsPDF direkt mit Text-Rendering-Primitiven (doc.text(), doc.line(), doc.image()) und baut das PDF von Grund auf mit auswählbarem Text und Vektorgrafiken auf. Das erfordert das Schreiben von Konverter-Code für jedes HTML-Element, das Sie unterstützen wollen, produziert aber ein „echtes" PDF, das suchbar und zugänglich ist. Der Kompromiss: html2pdf.js ist eine Codezeile; der jsPDF-Direct-Ansatz ist ein substanzielles Engineering-Projekt. Dieses Tool priorisiert Benutzerfreundlichkeit (html2pdf.js) gegenüber Text-Auswählbarkeit, seien Sie sich des Kompromisses bewusst, wenn Sie entscheiden, ob die Ausgabe Ihren Bedürfnissen entspricht.

Serverseitige Alternativen, wenn die Browserseite nicht ausreicht

wkhtmltopdf war das lange etablierte Open-Source-HTML-zu-PDF-Kommandozeilen-Tool, ein WebKit-basierter Renderer, der HTML auf dem Server in PDF konvertierte. In unzähligen CI-Pipelines, Unternehmensanwendungen und PDF-Generierungsdiensten verwendet. Das wkhtmltopdf-Projekt wurde 2023 archiviert (das GitHub-Repository ist jetzt schreibgeschützt); es sollte nicht die Empfehlung für neue Anwendungen sein, obwohl Milliarden bestehender PDFs damit erzeugt wurden. Puppeteer (Google, Headless Chrome seit 2017) ist der moderne Industriestandard für serverseitiges HTML-zu-PDF. Puppeteers page.pdf() verwendet Chromiums vollständige PDF-Generierungs-Pipeline, auswählbarer Text, eingebettete Schriften, Vektorgrafiken, Hyperlinks funktionieren alle korrekt, weil Chromium ein echtes PDF-Backend hat. Playwright (Microsoft, 2020) ist das Cross-Browser-Äquivalent (Chromium, Firefox, WebKit) mit derselben PDF-Generierungsfähigkeit. Prince (kommerziell, 495 $/Server) ist die Best-in-Class-Implementierung von CSS Paged Media, unterstützt Multi-Spalten-Layouts, laufende Kopf-/Fußzeilen, benannte Seiten, Fußnoten, OpenType-Features. WeasyPrint (Open Source, Python) ist die plattformübergreifende Alternative mit ähnlichen Features. Paged.js ist ein Polyfill, das CSS-Paged-Media-Features in die browserbasierte PDF-Generierung bringt. Das eingebaute „Als PDF speichern" des Browsers (Datei → Drucken → Als PDF speichern) ist die billigste Option überhaupt, es ist kostenlos, bereits installiert, unterstützt CSS Paged Media einigermaßen gut und produziert PDF-Ausgabe mit auswählbarem Text. Für einmalige Konvertierungen ist dies oft die richtige Antwort statt eines Drittanbieter-Tools.

CSS Paged Media, wie echtes Drucken-aus-CSS funktioniert

Das CSS Paged Media Module des W3C definiert eine Reihe von CSS-Features speziell für paginierte Ausgabe: @page-Regeln zur Steuerung von Seitengröße, Rändern und Orientierung; @page :left / @page :right für asymmetrische Ränder auf linken und rechten Seiten eines Buches; @page :first für spezielle Behandlung der ersten Seite; Margin Boxes (@top-center, @bottom-right usw.) für laufende Kopf- und Fußzeilen; page-break-before / page-break-after / page-break-inside zur Steuerung, wo Seiten umbrechen (mit der modernen Syntax break-before: page / break-after: page / break-inside: avoid); Orphans und Widows für Absatz-Umbruch-Kontrolle. Browser implementieren unterschiedliche Teilmengen von CSS Paged Media in ihrer Druck-Pipeline. Prince und WeasyPrint implementieren die volle Spec; Chromes page.pdf() deckt das meiste ab; html2pdf.js (dieses Tool) unterstützt grundlegende page-break-*-Regeln, überspringt aber die ausgefeilteren Margin-Box- und benannten-Seiten-Features. Für Dokumente, die Buch-qualitatives Layout brauchen (Titelseiten, Kapitelanfänge, laufende Kopfzeilen, Fußnoten), verwenden Sie Prince oder WeasyPrint; für den typischen „dieser Bericht als PDF speichern"-Fall reicht html2pdf.js.

Häufige Anwendungsfälle:

• Rechnungen und Quittungen. Der häufigste Geschäftsfall, ein strukturiertes HTML-Template mit Bestelldaten gefüllt, als PDF zum E-Mail-Versand oder zur Archivierung exportiert. Die Einschränkung text-nicht-auswählbar zählt selten, weil der Empfänger nicht im Inhalt einer einzelnen Rechnung suchen muss.
• Berichte und Dokumente. Quartalsweise Geschäftsberichte, Projekt-Deliverables, interne Status-Dokumente, aus einem Templating-System generiert, als PDF zur Verteilung exportiert.
• Zertifikate. Kursabschluss-Zertifikate, Konferenz-Teilnahme-Zertifikate, Erfolgs-Abzeichen, typischerweise eine einzelne Seite mit HTML/CSS-Styling, als einmaliges PDF exportiert.
• Lebensläufe und CVs. Kandidaten, die ihren Lebenslauf in einem Web-Template (Notion-Export, Custom Builder) bauen und als PDF zur Einreichung exportieren. Text-Auswählbarkeit zählt hier, weil Recruiting-Software (ATS) oft Stichwort-Extraktion aus Lebenslauf-PDFs durchführt.
• Tickets und Bestätigungen. Konzert-Tickets, Flug-Bordkarten, Hotel-Bestätigungen, aus Web-Buchungs-Flows zur Offline-Speicherung oder zum Drucken exportiert.
• Archivierung von Web-Inhalten. Einen Artikel, Blog-Post oder eine Dokumentationsseite als festformatiertes PDF für Offline-Referenz oder Langzeitspeicherung speichern.
• E-Mail-zu-PDF. HTML-E-Mails (Newsletter, Ankündigungen) zu PDF konvertieren für Weiterleitung oder Compliance-Archive.

Ehrlicher Geltungsbereich: was dieses Tool tut und was nicht

Dieses Tool verwendet html2pdf.js v0.10.1 (den gebündelten Build mit html2canvas + jsPDF), um HTML in Ihrem Browser zu rendern und einen PDF-Download zu produzieren. Das resultierende PDF ist pixel-genau zur Vorschau, was Sie sehen, ist, was Sie bekommen, aber der Text wird als Rasterbild gerendert, nicht als auswählbarer Text. Es unterstützt Seitengrößen A4, Letter, A3 und A5, Hoch- und Querformat, konfigurierbare Ränder, benutzerdefinierten Dateinamen und grundlegende CSS-page-break-*-Regeln zur Seitenumbruch-Kontrolle. Was dieses Tool nicht tut, und wo Sie zu einer Alternative greifen sollten: auswählbarer / suchbarer Text im PDF (verwenden Sie Puppeteer serverseitig oder Browser-„Als PDF speichern"); Buch-qualitatives Layout mit laufenden Kopfzeilen, Fußzeilen, benannten Seiten, Fußnoten (verwenden Sie Prince oder WeasyPrint serverseitig); JavaScript-Ausführung im gerenderten HTML (der Konverter läuft das HTML durch html2canvas, das keine Skripte im gerenderten Inhalt ausführt); animierte Inhalte (PDF ist statisch); Media Queries, die von Druckkontexten abhängen (das Rendering geschieht im Screen-Kontext). Für alltägliche „mach ein PDF aus diesem HTML"-Bedürfnisse reicht html2pdf.js; für Produktionspipelines, die echten PDF-Text und zugängliche Ausgabe brauchen, ist serverseitiges Puppeteer der moderne Standard.

Datenschutz: warum Browser-only hier zählt

PDF-Generierung ist ein verbreitetes Cloud-SaaS-Geschäft, Dienste wie DocRaptor, PDFShift, PDFCrowd, API2PDF berechnen pro erzeugtem PDF, meist weil sie Headless Puppeteer auf einer Server-Farm laufen lassen und die Kosten des GPU-beschleunigten Renderings absorbieren. Der Kompromiss: das HTML, das Sie an diese Dienste übermitteln, wird auf deren Infrastruktur verarbeitet: Rechnungen enthalten Kundeninformationen, Berichte enthalten Geschäftsdaten, Zertifikate enthalten persönliche Namen, Lebensläufe enthalten alles. Was auch immer Sie erzeugen, der Drittdienst sieht es. Dieses Tool läuft vollständig in Ihrem Browser per html2pdf.js, prüfen Sie im Network-Tab der DevTools beim Klick auf Generieren (die einzige ausgehende Anfrage ist das Abrufen der html2pdf.js-Bibliothek vom CDN; nach dem Laden keine weiteren Anfragen). Schalten Sie die Seite nach dem Laden der Bibliothek offline (Flugmodus), und der Konverter funktioniert weiter. Sicher für HTML, das Kundennamen, Finanzdaten, interne Templates oder beliebige Inhalte enthält, die Sie nicht auf der Festplatte eines Fremden kopiert sehen wollen.

Häufig gestellte Fragen

Welche HTML-/CSS-Funktionen werden unterstützt?

html2pdf unterstützt Standard-HTML und -CSS einschließlich Layouts, Schriftarten, Farben, Bildern und Tabellen. Erweiterte Funktionen wie Animationen, JavaScript und Media Queries sind eingeschränkt. Für die besten Ergebnisse nutzen Sie Inline-CSS oder <style>-Tags statt externer Stylesheets.

Wie binde ich Bilder in mein HTML ein?

Verwenden Sie Daten-URIs für Bilder oder stellen Sie sicher, dass externe Bild-URLs CORS-fähig und erreichbar sind. Base64-kodierte Bilder funktionieren zuverlässig. Beispiel: <img src="data:image/png;base64,…" />

Warum ist der Text im PDF nicht auswählbar?

Weil html2pdf.js das HTML zuerst zu einem Canvas-Bild rendert und dann das Bild ins PDF einbettet. Der „Text" des PDFs ist tatsächlich ein Rasterbild von Text, nicht echte Textglyphen. Das ist der Kompromiss für visuelle Treue: das PDF sieht genau wie die Browser-Vorschau aus, aber Sie können nicht suchen, kopieren oder einen Screen Reader darauf verwenden. Für echten auswählbaren PDF-Text sind die Alternativen: das eingebaute „Als PDF speichern" des Browsers verwenden (Datei → Drucken → Als PDF speichern, produziert auswählbaren Text und ist kostenlos); ein serverseitiges Tool wie Puppeteers page.pdf() verwenden, das Chromiums vollständige PDF-Generierungs-Pipeline hat; oder JavaScript schreiben, das die doc.text()-Primitive von jsPDF direkt aufruft (substanziell mehr Arbeit).

Warum unterscheidet sich meine Vorschau vom PDF?

Die Vorschau zeigt, wie Ihr HTML im Browser gerendert wird. Manche CSS-Funktionen werden im PDF anders dargestellt. Testen Sie komplexe Layouts vor der Erzeugung der finalen PDF und passen Sie Ränder oder Schriftgrößen bei Bedarf an.

Kann ich Seitenumbrüche in meinem HTML einfügen?

Ja, verwenden Sie CSS-Seitenumbrüche: Fügen Sie page-break-before: always; oder page-break-after: always; einem beliebigen Element hinzu. In CSS3 nutzen Sie für eine bessere Kompatibilität break-before: page; oder break-after: page;.

Wird mein HTML zu einem Server hochgeladen?

Nein. Das HTML, das Sie einfügen, und das generierte PDF bleiben beide in Ihrem Browser. Die einzige Netzwerkanfrage ist für die html2pdf.js-Bibliothek selbst, die zur Seiten-Ladezeit von einem öffentlichen CDN geladen wird; nach dem Laden keine weiteren ausgehenden Anfragen. Prüfen Sie im Network-Tab der DevTools beim Klick auf Generieren oder schalten Sie die Seite nach dem Laden der Bibliothek offline (Flugmodus), und der Konverter funktioniert weiter. Sicher für HTML, das Kundendaten, Finanzdetails, interne Geschäfts-Templates oder beliebige Inhalte enthält, die Sie nicht von einem Drittanbieter-PDF-Dienst gesehen haben wollen.