HTML zu PDF

How are you sending the HTML?
⚠ Heads up — read this first
Complex modern CSS (flexbox edge cases, grid, custom properties, container queries) may render imperfectly. For pixel-perfect web → PDF, use the browser's built-in Print → Save as PDF. This tool is for quick conversions where round-trip-perfect isn't required.

🔒 Everything happens in your browser. Nothing uploads. Close the tab and it's gone.

Der HTML-zu-PDF-Konverter verwandelt jedes HTML — eingefügtes Markup, eine .html-Datei oder eine öffentliche URL — in ein herunterladbares PDF. Wähl A4 oder Letter, Hoch- oder Querformat und einen Rand. Die Seite wird mit html2canvas in eine Off-Screen-Leinwand gerendert, von jsPDF in PDF-Seiten gekachelt und dir als einzelne Datei zurückgegeben. Läuft komplett in deinem Browser; nichts wird hochgeladen. Sei ehrlich über die Grenzen: html2canvas implementiert eine Teilmenge von CSS neu, daher rendern Flexbox-Sonderfälle, Grid und Custom Properties vielleicht unvollkommen. Für pixel-genaues Output nutz Drucken → Als PDF speichern deines Browsers. URL-Modus ist Best-Effort — die meisten öffentlichen Seiten blockieren Cross-Origin-Fetches (CORS), also ist „HTML einfügen" der zuverlässige Pfad dafür.

Built by Bob Article by Lace QA by Ben Shipped

Anwendung

  1. 1

    Wähl einen Modus. HTML einfügen funktioniert für jedes Markup, das du bereits hast. .html hochladen akzeptiert eine lokale Datei. Von URL holt eine öffentliche Seite (die meisten scheitern an CORS — siehe FAQ).

  2. 2

    Stell Seitengröße (A4 oder Letter), Ausrichtung (Hoch- oder Querformat) und Rand (0, 10, 20 oder 40 mm) ein. Standards sind A4 / Hochformat / 20 mm.

  3. 3

    Klick auf Zu PDF konvertieren. Das HTML wird in ein verstecktes Div gerendert, html2canvas erfasst es bei 2×-Skalierung und jsPDF kachelt das Ergebnis über so viele Seiten wie nötig.

  4. 4

    Klick auf Download. Der Output-Dateiname wird aus der Quelle abgeleitet: eingefügtes HTML → webpage.pdf, hochgeladene Datei → spiegelt den Dateinamen, URL → abgeleitet vom Hostnamen (example.com → example-com.pdf).

Verwandte Tools

🖼 Image to PDF 📎 PDF Merger 📦 Compress PDF 🔄 PDF to PNG

Häufig gestellte Fragen

Ratings & Reviews

Rate this tool

Sign in to rate and review this tool.

Loading reviews…

Was der HTML-zu-PDF-Konverter macht

Der HTML-zu-PDF-Konverter nimmt jedes HTML, das du hast — eingefügtes Markup, eine hochgeladene .html-Datei oder eine öffentliche URL — und verwandelt es in ein herunterladbares PDF. Die Seite wird mit html2canvas in eine Off-Screen-Leinwand gerendert, von jsPDF auf PDF-Seiten gekachelt und als einzelne Datei zurückgegeben. Wähl A4 oder Letter, Hoch- oder Querformat und einen Rand. Alles passiert in deinem Browser. Nichts wird hochgeladen.

Sei ehrlich über den Deal. html2canvas implementiert eine Teilmenge von CSS in JavaScript neu — es liest berechnete Stile vom DOM und malt sie auf eine Leinwand. Es trifft das Übliche: Farben, Schriften, Polster, Ränder, Hintergründe, einfache Positionierung, einfaches Flexbox. Es kämpft bei Sonderfällen: komplizierte Grid-Layouts, Subgrid, Baseline-Ausrichtung, Prozent-Gaps in Flex-Containern, bestimmte Custom-Property-Layout-Berechnungen. Für pixel-genaues Output gewinnt das eigene Drucken → Als PDF speichern deines Browsers — es nutzt die echte Rendering-Engine. Unser Tool ist für den Fall, wo du rohes HTML in der Hand hast und ein PDF willst, ohne zuerst einen Browser-Tab zu starten.

So nutzt du es

Das Widget hat drei Input-Modi. Wähl den, der zu deiner Situation passt.

  1. Wähl einen Modus. HTML einfügen funktioniert für jedes Markup, das du bereits hast. .html hochladen akzeptiert eine lokale Datei. Von URL holt eine öffentliche Seite (die meisten scheitern an CORS — siehe unten).
  2. Stell Seitengröße (A4 oder Letter), Ausrichtung (Hoch- oder Querformat) und Rand (0, 10, 20 oder 40 mm) ein. Standards sind A4 / Hochformat / 20 mm.
  3. Klick auf Zu PDF konvertieren. Das HTML wird in ein verstecktes Div gerendert, html2canvas erfasst es bei 2×-Skalierung für Schärfe und jsPDF kachelt das Ergebnis über so viele Seiten wie nötig.
  4. Klick auf Download. Der Output-Dateiname wird aus der Quelle abgeleitet: eingefügtes HTML → webpage.pdf, hochgeladene Datei → spiegelt den Dateinamen, URL → abgeleitet vom Hostnamen (example.com → example-com.pdf).

Nichts an deinem HTML trifft einen Server, den wir kontrollieren. Einfügen-Modus und Upload-Modus sind komplett lokal — öffne den Netzwerk-Tab deines Browsers während der Konvertierung und du siehst null ausgehende Anfragen. URL-Modus macht genau eine Anfrage: Dein Browser holt die URL, die du eingegeben hast, und die Antwort bleibt im Browser-Speicher.

Die drei Input-Modi und wann jeder zu nutzen ist

Jeder Modus löst ein anderes Problem. Den richtigen vorab zu wählen spart Zeit.

ModusWas er akzeptiertFunktioniert beiAm besten für
HTML einfügenJedes Markup im TextfeldAllem (das Markup ist schon lokal)E-Mail-Vorlagen, CMS-Snippets, exportierte Berichte, alles was du kopieren-einfügen kannst
.html hochladenEine lokale .html-DateiAllem (die Datei ist schon lokal)Eigenständige HTML-Berichte, generierte Rechnungen, exportierte Notebooks
Von URLEine öffentliche URL mit erlaubendem CORSEtwa 5 % öffentlicher URLs (CORS-erlaubte Endpunkte, Dev-Umgebungen, deine eigenen Seiten)Schnelle Fetches von APIs, die HTML zurückgeben, deine eigenen Seiten, wo du die Header kontrollierst

Wenn du URL-Modus versucht hast und einen Fehler bekommen hast, bist du auf Cross-Origin Resource Sharing gestoßen — ein Browser-Sicherheits-Feature, kein Bug, den wir umgehen können. Der Workaround ist universell: Öffne die URL in einem normalen Tab, Rechtsklick → Seitenquelltext anzeigen (oder DevTools → Elements → Copy outerHTML auf das <html>-Tag, wenn die Seite JS-gerendert ist) und füg das in den HTML-einfügen-Modus ein. Das HTML ist jetzt lokal, CORS gilt nicht mehr und die Konvertierung läuft.

Ein durchgerechnetes Beispiel mit echten Zahlen

Angenommen du hast eine HTML-E-Mail-Vorlage — eine Marketing-Ankündigung, 1.200 Wörter Body-Copy, zwei Header-Bilder, eine CTA-Schaltfläche, Footer mit sozialen Links. Etwa 18 KB HTML und 240 KB Inline-Bilder, alles in einer .html-Datei mit einem einzelnen <style>-Block oben.

Bei A4 / Hochformat / 20 mm Rand: Konvertierung dauert 2,5 Sekunden. Output ist 1,3 MB über 3 Seiten. Das Hero-Bild ist scharf, der Body-Type liest sauber, die CTA-Schaltfläche behält ihre Form und Farbe, die Footer-Logos rendern in der richtigen Größe. Der einzige sichtbare Unterschied zur Quelle: Der Hover-Status auf der CTA wird nicht erfasst (wir rendern das ruhende DOM, keine Hover-Simulation) und der flex-wrap des Footers hat ein Symbol in eine zweite Reihe gesetzt, weil html2canvas den Flex-Gap leicht anders gemessen hat als ein echter Browser.

Bei A4 / Querformat / 10 mm Rand: derselbe Inhalt, 2 Seiten statt 3, leicht breitere Zeilenlängen. 1,1 MB. Letter / Hochformat / 20 mm: 3 Seiten, 1,3 MB, Zeilen umbrechen an denselben Wortgrenzen wie A4, weil die Spalte fast dieselbe Breite hat.

Jetzt dreh den Input um: ein Single-Page-App-Dashboard, gerendert mit React, serviert von localhost:3000. URL-Modus holt das Bootstrap-HTML und überspringt jede Komponente, die React mounten sollte — du bekommst ein leeres PDF mit dem Lade-Spinner. Der richtige Schritt: Öffne die App in einem Tab, lass sie rendern, kopier outerHTML aus dem gerenderten DOM, füg in HTML-einfügen-Modus ein. Das PDF passt jetzt zu dem, was auf dem Bildschirm war.

Wie das verglichen mit Adobe Acrobat, SmallPDF, iLovePDF ist

Die Big-Name-HTML-zu-PDF-Dienste — Adobe Acrobats Web-Version, SmallPDFs URL-zu-PDF, iLovePDFs HTML-zu-PDF, PDFCrowd, DocRaptor — laufen alle server-seitig, was die richtige Architektur für Treue ist, aber die falsche für Privatsphäre und Geschwindigkeit.

Diese Dienste betreiben meist eine Headless-Chromium-Instanz auf ihrem Server. Du gibst ihnen eine URL oder HTML; sie starten einen Browser, navigieren zu deinem Inhalt, führen das JS aus, warten, bis Schriften und Bilder laden, dann treffen sie Chromes Druck-API. Der Output ist pixel-genau, weil er aus einem echten Browser kam. Die Nachteile: Dein HTML und alle Daten darin reisen zu ihrer Infrastruktur und sitzen in ihren Logs; du wartest in der Warteschlange mit den Render-Jobs aller anderen; es gibt meist ein tägliches kostenloses Kontingent und eine bezahlte Stufe, die bei 9-15 $/Monat startet; und die meisten verlangen ein Konto vor der zweiten Datei.

Wir machen weniger, in deinem Browser, kostenlos. Der Deal ist ehrlich: Komplexes CSS rendert vielleicht unvollkommen, JS wird nicht ausgeführt (wir laufen keine Skripte im Off-Screen-Render-Container), Web-Schriften, die einen CORS-erlaubten Fetch brauchen, fallen vielleicht auf Standards zurück, und sehr lange Seiten produzieren vielleicht großes Output. Für eine E-Mail-Vorlage, einen exportierten Bericht, eine CMS-Vorschau oder eine generierte Rechnung — häufige HTML-zu-PDF-Jobs — ist unser Tool die richtige Wahl. Für eine polierte Marketing-Seite, die du Bit-für-Bit archivieren willst, nutz Chromes Drucken → Als PDF speichern oder einen der server-seitigen Dienste, wenn es sich lohnt, ihn zu skripten.

Was html2canvas kann und nicht kann

html2canvas ist die Engine, die die visuelle Arbeit macht, und seine Grenzen zu kennen spart Kopfschmerzen.

Funktioniert gut:

  • Standard-CSS-Eigenschaften. Farbe, Hintergrund, Schrift, Polster, Rand, Border, Border-Radius, Box-Shadow, Opacity — alle rendern wie in einem echten Browser.
  • Inline-Stile und Same-Document-<style>-Tags. Wenn dein CSS im HTML ist, das du einfügst, funktioniert es. Inline dein CSS immer in einen einzelnen <style>-Block oben für beste Ergebnisse.
  • Einfaches Flexbox. Zeilen- und Spalten-Layouts, einfache Ausrichtung, Gap, einfache justify-content und align-items — okay für die große Mehrheit von Layouts.
  • Inline- und Block-Bilder. JPEGs und PNGs, die im HTML eingebettet oder per absoluter URL von CORS-erlaubenden Servern referenziert sind, rendern korrekt.

Funktioniert unvollkommen:

  • CSS Grid. Einfache Grids mit expliziten Tracks rendern meist. Auto-Platzierung, Subgrid, benannte Bereiche und grid-template-areas oft nicht.
  • Custom Properties (CSS-Variablen). Geehrt, wenn die Eigenschaft direkt gelesen wird, aber einige Computed-Value-Ketten brechen.
  • Flexbox-Sonderfälle. flex-wrap mit Kindern unterschiedlicher Höhe, Baseline-Ausrichtung, Prozent-Gaps, Items mit flex-basis: 0 % — die layouten manchmal mit leicht falschen Dimensionen.
  • Web-Schriften, von externen Domains geladen. Wenn die CORS-Header der Schrift Cross-Origin-Lesen erlauben, rendert sie; sonst fallen wir auf einen System-Serif zurück.

Funktioniert nicht:

  • JavaScript. Wir führen keine Skripte im Render-Container aus. Wenn dein HTML auf JS angewiesen ist, um Inhalt einzufügen (Diagramme, SPAs, irgendwas Dynamisches), erfass zuerst das gerenderte DOM in DevTools und füg das ein.
  • iframes. Der Inhalt eines iframes lebt in einem anderen Dokument-Kontext, den html2canvas nicht lesen kann.
  • :hover, :focus, :active Stati. Das DOM wird in Ruhe erfasst. Hover-Effekte werden nicht simuliert.
  • Animationen. Ein einzelner Frame wird erfasst. CSS-Transitions und Keyframe-Animationen erscheinen nicht.

Wann das Drucken → Als PDF speichern des Browsers die richtige Antwort ist

Chrome, Firefox, Safari und Edge haben alle eine eingebaute Als-PDF-speichern-Option im Druck-Dialog. Sie nutzt die echte Rendering-Engine des Browsers (Blink, Gecko, WebKit), was perfekte Treue bei Grid, Flexbox, Web-Schriften und JS-gerendertem Inhalt bedeutet. Sie handhabt auch deine Auth-Cookies — Seiten hinter einem Login rendern korrekt, weil der Druck-Dialog im selben Browser-Kontext wie die Seite ist.

Der Haken: Es erfordert, dass du die Seite tatsächlich in einem Tab öffnest und durch den Druck-Dialog gehst. Das ist okay für ein oder zwei PDFs. Es ist mühsam für Batch-Jobs oder für HTML, das du über eine API oder einen CMS-Export bekommen hast. Unser Tool ist dafür — rohes HTML in der Hand, will ein PDF, will keinen Tab starten. Das Drucken → Als PDF speichern des Browsers ist das richtige Tool für alles andere.

Der Entscheidungsbaum: pixel-genau, du hast die Seite in einem Tab offen → Drucken → Als PDF speichern. Rohes HTML in der Hand, „gut genug"-Output, kein Upload → dieses Tool. Pixel-genau und du musst das über hunderte URLs skripten → Headless Chromium über Puppeteer oder einer der bezahlten Dienste.

Verwandte PDF-Tools

Der HTML-zu-PDF-Konverter paart sich auf dem Weg zu einem fertigen Dokument mit ein paar anderen:

  • Bild zu PDF — bündel einen Ordner mit Bildern in ein einzelnes PDF. Oft das richtige Tool, wenn dein „HTML" wirklich ein Stapel Screenshots ist.
  • PDF-Merger — kombiniere den HTML-zu-PDF-Output mit anderen PDFs (einem Anschreiben, einem Anhang, einer unterschriebenen Seite) zu einer Datei.
  • PDF komprimieren — wenn der Output unerwartet groß ist (lange Seiten und viele Bilder können 5-10 MB drücken), lass ihn durch den Komprimierer laufen.
  • PDF zu PNG — render jede PDF-Seite als Bild, sobald du das PDF in der Hand hast.
  • Word zu PDF — wenn du wirklich eine .docx hast und auf das HTML-Tool gestolpert bist, ist das hier der richtige Nachbar.

Microapp liefert jedes PDF-Tool browser-seitig. 10 % von jedem Dollar Umsatz gehen an Wohltätigkeit, vorab, quartalsweise auditiert — die Tools müssen diese 10 % verdienen, was bedeutet, sie müssen tatsächlich funktionieren, ohne dich in Upsells zu begraben.

Häufig gestellte Fragen

Warum scheitert meine URL?

Cross-Origin Resource Sharing (CORS). Wenn dein Browser eine URL von JavaScript auf einer anderen Domain holt, muss der Zielserver das ausdrücklich über Response-Header erlauben. Fast keine öffentliche Website tut das. Das ist ein Browser-Sicherheits-Feature, nicht etwas, das wir auf der Seite umgehen können. Der zuverlässige Pfad: Öffne die URL in einem normalen Browser-Tab, Quelltext anzeigen (oder Rechtsklick → Seitenquelltext anzeigen), kopier das HTML und füg es in den HTML-einfügen-Modus hier ein. Das umgeht CORS komplett, weil das HTML jetzt lokal ist. Seiten, die Login erfordern, funktionieren auch so nicht — sie brauchen deine Session-Cookies, die unser Fetch nicht ausleihen kann.

Bewahrt es CSS?

Das meiste, ja — aber nicht alles. html2canvas liest berechnete Stile vom gerenderten DOM und malt sie auf eine Leinwand. Standard-Farbe, -Schrift, -Polster, -Rand, -Hintergrund und einfache Positionierung funktionieren alle. Inline-Stile, <style>-Tags innerhalb deines HTML und Stile, die über Klassennamen aus deinem Stylesheet angewendet werden, beteiligen sich alle. Der Haken: Wenn dein HTML auf externe Stylesheets auf anderen Domains verweist, könnten die genau wie der URL-Fetch oben durch CORS blockiert sein — in dem Fall nutzt das gerenderte Output Standardstile für diese Regeln. Für beste Ergebnisse inline dein CSS in einen <style>-Block oben im HTML, das du einfügst.

Was ist mit Flexbox und Grid?

Flexbox: funktioniert meist für die häufigen Fälle (Zeilen-/Spalten-Layouts, einfache Ausrichtung). Sonderfälle — flex-wrap mit gemischtem Inhalt der Kinder, Baseline-Ausrichtung, Prozent-Gaps — rendern manchmal mit falschen Dimensionen. Grid: Teilunterstützung. Einfache Grids mit expliziten Zeilen-/Spalten-Tracks funktionieren meist; Auto-Platzierung, Subgrid und benannte Bereiche oft nicht. CSS Custom Properties (--my-var) werden geehrt, wenn sie direkt gelesen werden, aber brechen einige Layout-Berechnungen. Wenn dein Dokument stark von modernem Layout abhängt, nutz Drucken → Als PDF speichern deines Browsers (Chrome, Firefox, Safari unterstützen alle) stattdessen — das nutzt die echte Rendering-Engine des Browsers, keine JS-Neuimplementierung.

Was ist mit JavaScript?

Nicht ausgeführt. Wir entfernen nichts, aber html2canvas erfasst das DOM, wie es existiert, wenn wir es übergeben — und wir führen keine Skripte im Off-Screen-Render-Container aus. Wenn dein HTML auf JS angewiesen ist, um Inhalt einzufügen, führe dieses JS zuerst in einem regulären Browser-Tab aus, sieh den Quelltext des gerenderten DOM (DevTools → Elements → Copy outerHTML auf <html>) und füg die Post-JS-Version hier ein. Diagramme, Single-Page-Apps, alles was sich mit JS selbst baut — erfass das gerenderte DOM, dann konvertieren.

Wie ist das verglichen mit dem Drucken → Als PDF speichern des Browsers?

Drucken → Als PDF speichern nutzt die echte Layout-Engine deines Browsers (Blink in Chrome, WebKit in Safari, Gecko in Firefox), trifft also alles — Flexbox, Grid, Web-Schriften, JS-gerenderten Inhalt, perfekte Typografie. Der Haken: Es erfordert, dass du die Seite zuerst in einem Tab öffnest und durch den Druck-Dialog gehst. Unser Tool ist für den Fall, wo du rohes HTML hast (eine E-Mail-Vorlage, die du testest, einen exportierten Bericht, ein Snippet aus einem CMS) und ein PDF willst, ohne es zuerst in einem Browser zu öffnen. Nutz Drucken für Treue, nutz das hier für Geschwindigkeit und automatisierungs-freundlichen Roh-HTML-Input.

Wird mein HTML wirklich nicht hochgeladen?

Korrekt für HTML einfügen und .html hochladen — beide laufen komplett in deinem Browser, keine ausgehenden Anfragen. Für Von URL gibt es genau eine ausgehende Anfrage: Dein Browser holt die URL, die du eingegeben hast, und das war's; das geholte HTML bleibt im Speicher und erreicht nie unsere Server. Verifizier im Netzwerk-Tab deines Browsers. Das PDF wird lokal gebaut und über eine Blob-URL heruntergeladen.

Warum ist der Output größer als erwartet?

Weil die Seite in eine Leinwand rasterisiert wird, dann als JPG neu kodiert wird, wenn sie im PDF landet. Eine lange Seite mit vielen Bildern kann leicht ein Multi-MB-PDF aus wenigen KB Quell-HTML produzieren. Wenn Größe zählt, lass das Ergebnis durch unseren PDF-Komprimierer laufen — für bildlastiges Output schrumpft er oft 50-70 %.

Kann ich eine passwortgeschützte oder hinter einem Login liegende Seite konvertieren?

Nicht aus dem URL-Modus — unser Fetch hat keinen Zugriff auf deine Browser-Cookies oder Auth-Header. Workaround: Öffne die Seite in deinem normalen Browser-Tab (wo du eingeloggt bist), öffne DevTools → Elements, Rechtsklick auf das <html>-Tag → Copy → Copy outerHTML, dann füg das in HTML einfügen ein. Das erfasst die vollständig gerenderte, authentifizierte Seite inklusive jedem DOM, den JS nach dem Login gebaut hat.