Wie Sie HTML in PDF konvertieren
PDFs aus HTML zu erstellen ist nützlich, um Rechnungen, Berichte, Briefe, Zertifikate und alle Dokumente zu generieren, bei denen Sie das Layout per CSS steuern, aber als PDF verteilen möchten.
So konvertieren Sie HTML zu PDF
- Fügen Sie Ihr HTML ein — geben Sie Ihren HTML-Code einschließlich aller Inline-CSS- oder
<style>-Tags in den Editor ein. Der Code kann die vollständige Seitenstruktur mit Kopfzeilen, Tabellen, Bildern und Stilen enthalten. - Vorschau prüfen — eine Live-Vorschau zeigt genau, wie Ihr PDF aussehen wird, während Sie tippen. Passen Sie HTML und CSS an, bis die Vorschau Ihren Vorstellungen entspricht.
- Generieren und herunterladen — klicken Sie auf die Generieren-Schaltfläche, um das PDF im Browser zu erstellen, und laden Sie es sofort herunter.
Was Sie erstellen können
- Rechnungen und Quittungen — strukturierte Tabellen mit Firmenidentität, Posten und Summen
- Berichte — formatierte Dokumente mit Überschriften, Absätzen, Diagrammen und Datentabellen
- Zertifikate — gestaltete Layouts mit benutzerdefinierten Schriftarten, Rahmen und zentriertem Text
- Briefe — professionelle Korrespondenz mit Kopfzeile, Hauptteil und Unterschriftsbereich
- Lebensläufe — sorgfältig gestaltete Layouts, die als saubere PDFs für Bewerbungen exportiert werden
Stil-Tipps für die PDF-Ausgabe
Verwenden Sie Inline-Stile oder <style>-Tags — externe Stylesheets werden nicht geladen. Platzieren Sie Ihr gesamtes CSS entweder inline auf Elementen oder in einem <style>-Block im HTML.
Legen Sie Seitenränder fest — verwenden Sie @page { margin: 20mm; } in CSS, um den Leerraum um Ihren Inhalt im PDF zu steuern.
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 Maßen entsprechen sollen.
Vermeiden Sie viewport-abhängige Layouts — prozentuale Breiten und feste Pixelbreiten funktionieren am besten. Viewport-Einheiten (vw, vh) verhalten sich in der PDF-Ausgabe möglicherweise nicht wie erwartet.
Tipps
- Zuerst Vorschau prüfen — kontrollieren Sie immer die Live-Vorschau, bevor Sie generieren. Es ist viel schneller, am HTML zu iterieren, als jedes Mal ein neues PDF zu erzeugen.
- Verwenden Sie Base64 für Bilder — konvertieren Sie Bilder in Base64-Daten-URIs, um deren garantierte Einbindung im PDF sicherzustellen. Externe URLs können wegen CORS-Beschränkungen scheitern.
- Halten Sie es einfach — komplexe CSS-Layouts (verschachtelte Grids, überlappende positionierte Elemente) werden möglicherweise nicht perfekt gerendert. Einfachere Layouts ergeben zuverlässigere PDFs.
- Seitenumbrüche testen — verwenden Sie für mehrseitige Dokumente
page-break-before: always, um zu steuern, wo neue Seiten beginnen.
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.