🌐

HTML in PDF

Eine Webseite über ihre URL als PDF speichern oder eine HTML-Datei bzw. eingefügten HTML-Code in PDF umwandeln.

Wandeln Sie die Adresse einer Webseite in ein PDF um

Geben Sie die Adresse einer öffentlichen Website ein, um sie als Schnappschuss in ein druckfertiges PDF umzuwandeln:

So unterscheidet sich dieser Tab von den anderen beiden: Ein Browser kann eine Seite auf einer anderen Domain nicht direkt lesen. Erlaubt die Website das nicht, wird die Adresse an einen öffentlichen CORS-Proxy (allorigins.win oder corsproxy.io) übergeben, um das HTML abzurufen. Die Adresse wird dabei an diesen Dienst weitergegeben. Eingefügter Code oder eine hochgeladene Datei verlassen Ihr Gerät nie.

Reinen HTML- und CSS-Code einfügen

Geben Sie Ihr HTML-Markup und CSS ein oder fügen Sie es ein, um es direkt in ein PDF zu rendern:

Ihre Dateien bleiben auf diesem Gerät. Es wird nichts hochgeladen. So prüfen Sie das

HTML in PDF: Anleitung

1. Wählen Sie einen Tab: HTML-Code einfügen, HTML-Datei hochladen oder Webadresse. Eingefügter Code und hochgeladene Dateien bleiben in Ihrem Browser. Der Tab für die Webadresse übermittelt die Adresse unter Umständen an einen öffentlichen Proxy, wie unter diesem Tab erklärt.
2. Fügen Sie Ihr Markup ein, ziehen Sie eine .html-Datei hinein (bis zu 150 MB) oder geben Sie eine Adresse ein. Im Tab für die Webadresse können Sie außerdem unter Ausrichtung zwischen Hochformat und Querformat sowie unter Seitenformat zwischen A4 (Standard) und Letter (USA) wählen.
3. Klicken Sie auf HTML-Code in PDF umwandeln, HTML-Datei in PDF umwandeln oder Webseite in PDF umwandeln und danach auf Datei herunterladen oder Vorschau anzeigen.

HTML in PDF: die wichtigsten Funktionen

🌐 Drei Startmöglichkeiten

Fügen Sie Markup in den Editor ein, laden Sie eine .html-Datei hoch oder geben Sie die Adresse einer öffentlichen Seite ein. Jeder Tab hat eine eigene Schaltfläche zum Umwandeln, und die Ergebniskarte zeigt vor dem Download eine Vorschau.

🖼️ Als Bild gerendert

html2canvas zeichnet das HTML mit 1,5-facher Vergrößerung auf ein Canvas, das in A4-Seiten geschnitten wird (oder Letter, falls im Tab für die Webadresse gewählt) und als JPEG-Bilder eingebettet wird. Inline-CSS, Farben und Tabellen erscheinen so, wie sie gerendert wurden; der Text im PDF lässt sich nicht markieren oder durchsuchen.

🔒 Lokal, außer im Tab für die Webadresse

Eingefügter Code und hochgeladene Dateien werden von JavaScript in Ihrem Browser gerendert, und Ihr HTML wird nie irgendwohin gesendet. Der Tab für die Webadresse ruft die Seite direkt ab, wenn möglich, und sendet die Adresse andernfalls an allorigins.win oder corsproxy.io.

HTML in PDF im Überblick

HTML in PDF lädt Ihr Markup in einen verborgenen Frame in einer Sandbox mit 794 Pixel Breite, rendert es mit html2canvas und zerlegt das Canvas in A4-Seiten, die pdf-lib als JPEG-Bilder mit 85 Prozent Qualität einbettet. Eingefügter Code und hochgeladene Dateien sind immer im Hochformat; der Tab für die Webadresse bietet zusätzlich die Wahl des Querformats. Im Adressmodus versucht die Seite zunächst, die Adresse direkt abzurufen, dann über einen öffentlichen CORS-Proxy, und meldet einen Fehler, wenn keiner der beiden Versuche HTML liefert, statt ein leeres PDF zu erzeugen.

Es eignet sich gut für eine Rechnung oder einen Bericht, den Sie als HTML mit Inline-Stilen geschrieben haben, für einen gespeicherten Artikel oder für eine schnelle, druckfertige Kopie einer einfachen Seite. Da jede Seite ein Bild ist, lässt sich der Text nicht markieren, und die Datei ist größer als ein PDF mit Text. Abgerufene Webseiten werden ohne ihre Skripte gerendert, und Stylesheets oder Bilder mit relativen Pfaden werden nicht geladen, sodass app-artige Websites und Seiten hinter einer Anmeldung meist nicht wie das Original aussehen.

HTML in PDF: typische Anwendungsfälle

Ein Marketing-Tool hat Ihnen das HTML einer E-Mail oder eines Newsletters geliefert, und jemand möchte einen Korrekturabzug als PDF. Fügen Sie das Markup im Tab HTML-Code einfügen ein. Inline-Stile, Farben und Tabellen werden so dargestellt wie in einem 794 Pixel breiten Browser, und die Seiten entstehen als Bilder dieser Darstellung.

Ein Skript oder ein System hat einen Bericht als .html-Datei auf Ihrer Festplatte erzeugt, zum Beispiel ein Testergebnis oder einen Laborausdruck. Verwenden Sie HTML-Datei hochladen. Bilder, die über einen relativen Pfad wie chart.png eingebunden sind, werden nicht gefunden, weil die Datei innerhalb dieser Seite gerendert wird und nicht aus ihrem eigenen Ordner; betten Sie sie zuerst als data:-URLs ein oder verweisen Sie auf vollständige https-Adressen.

Sie möchten eine Offlinekopie eines öffentlichen Artikels in einem festen Seitenformat. Geben Sie die Adresse im Tab für die Webadresse ein, wählen Sie Hochformat oder Querformat sowie A4 oder Letter, und wandeln Sie um. Lesen Sie zuerst den Hinweis unter diesem Tab: Die Adresse kann an einen öffentlichen Proxy weitergegeben werden, und Seiten, die sich selbst per JavaScript aufbauen oder hinter einer Anmeldung liegen, kommen meist unvollständig heraus.

Wenn Sie auswählbaren Text statt eines Bildes benötigen, passen andere Tools besser: einfachen Text über Text in PDF, ein Word-Dokument über Word in PDF. Ein hier erstelltes PDF kann anschließend über OCR PDF eine Textebene erhalten, und PDF in HTML geht den umgekehrten Weg.

Tipps und Fehlerbehebung

  • Die Meldung, dass die Adresse nicht abgerufen werden konnte, bedeutet, dass alle drei Versuche fehlgeschlagen sind: ein direkter Abruf, dann allorigins.win, dann corsproxy.io, jeweils mit einem Zeitlimit von vier Sekunden. Langsame Websites scheitern allein am Zeitlimit. Speichern Sie die Seite aus Ihrem Browser als HTML-Datei und verwenden Sie stattdessen den Tab HTML-Datei hochladen.
  • Die Felder Ausrichtung und Seitenformat gibt es nur im Tab für die Webadresse. Eingefügter Code und hochgeladene Dateien werden immer auf A4-Seiten im Hochformat gerendert.
  • Das HTML wird in einem Frame mit 794 Pixel Breite angelegt, der Breite von A4 bei 96 dpi, und das body-Element erhält einen Rand von 30 Pixeln, sofern Ihr HTML keinen eigenen festlegt; damit bleiben 734 Pixel für den Inhalt. Breiterer Inhalt, etwa eine Tabelle mit fester Breite, verbreitert das Bild, und das gesamte Dokument wird dann auf die Seitenbreite verkleinert, sodass sein Text kleiner ausfällt; geben Sie Containern eine Breite von 100 Prozent oder weniger.
  • Seitenumbrüche fallen im gerenderten Bild auf feste Höhen, sodass eine Textzeile oder ein Bild auf zwei Seiten aufgeteilt werden kann. CSS-Regeln für Seitenumbrüche werden nicht berücksichtigt.
  • Der Download heißt html_document.pdf bei eingefügtem Code, bei einem Upload der Dateiname Ihrer Datei mit .pdf, und bei einer Webadresse der Hostname, bei dem Punkte durch Unterstriche ersetzt und der auf 25 Zeichen gekürzt wird, zum Beispiel en_wikipedia_org.pdf.
  • Wenn ein Werbeblocker oder ein Netzwerkfilter das Laden von html2canvas von cdnjs.cloudflare.com verhindert, bricht die Umwandlung mit der Meldung ab, dass der Seiten-Renderer nicht geladen werden konnte. Erlauben Sie diesen Host, laden Sie die Seite neu und wandeln Sie erneut um.
  • Für die umgekehrte Richtung wandelt PDF in HTML die Textebene eines PDFs in eine eigenständige HTML-Datei um.

HTML in PDF: So funktioniert es in Ihrem Browser

Unabhängig vom verwendeten Tab wird der HTML-String in einen verborgenen Frame geladen, der außerhalb des sichtbaren Bereichs auf 794 Pixel Breite fixiert ist. Der Frame läuft in einer Sandbox ohne Erlaubnis, Skripte auszuführen, sodass kein Skript und kein Event-Handler im Markup läuft und die eigenen Stile und das dunkle Design dieser Website ihn nicht erreichen. Nachdem der Frame geladen ist (höchstens acht Sekunden, falls ein Bild oder Stylesheet langsam ist) und nach einer kurzen Pause, damit sich die Schriften einstellen, durchläuft html2canvas 1.4.1 dieses DOM und zeichnet es mit 1,5-facher Skalierung auf ein Canvas. Das Canvas wird in Streifen zerschnitten, jeder in der Höhe einer A4- oder Letter-Seite bei dieser Breite; jeder Streifen wird als JPEG mit 85 Prozent Qualität kodiert und von pdf-lib auf einer neuen, auf die Seitenbreite skalierten Seite eingebettet.

In den Tabs zum Einfügen und Hochladen verlässt das Markup den Tab nie: File.text() liest eine hochgeladene Datei im Browser, und abgesehen von Google Analytics, solange es eingeschaltet ist, sind die einzigen Anfragen die beiden Bibliotheksskripte von cdnjs.cloudflare.com sowie externe Bilder oder Stylesheets, die Ihr HTML selbst referenziert. Der Tab für die Webadresse versucht zuerst, die Adresse direkt abzurufen, dann über allorigins.win, dann über corsproxy.io, jeweils mit vier Sekunden Zeitlimit, und verwendet die erste Antwort, die länger als 100 Zeichen ist. Diese Dienste sehen die eingegebene Adresse, aber nicht das fertige PDF, das im Arbeitsspeicher zusammengesetzt und als Blob bereitgestellt wird.

Häufig gestellte Fragen

Ist der Text im PDF auswählbar oder durchsuchbar?

Nein. Jede Seite ist ein JPEG-Bild des gerenderten HTML, daher lässt sich der Text nicht markieren, durchsuchen oder kopieren. Wenn Sie eine Textebene benötigen, verarbeiten Sie das Ergebnis anschließend mit dem Tool OCR PDF.

Sendet der Tab für die Webadresse etwas von meinem Gerät?

Ja, die Adresse. Die Seite wird direkt abgerufen, wenn die Website das erlaubt, andernfalls wird die Adresse an allorigins.win oder corsproxy.io übergeben, um das HTML abzurufen. Die Tabs zum Einfügen und Hochladen senden Ihr HTML nirgendwohin.

Warum sieht eine Webseite anders aus als die Live-Website?

Das abgerufene HTML wird ohne die Skripte der Website gerendert, und Stylesheets oder Bilder mit relativen Pfaden können nicht geladen werden. Einfache Artikel werden brauchbar umgewandelt; Seiten, die sich selbst per JavaScript aufbauen oder eine Anmeldung erfordern, meist nicht.

Kann ich das Format Letter oder Querformat wählen?

Nur im Tab für die Webadresse, der die Auswahlfelder Ausrichtung und Seitenformat bietet. Eingefügter Code und hochgeladene Dateien werden immer auf A4-Seiten im Hochformat gerendert.

Warum fehlen Bilder im PDF?

Bilder mit relativen Pfaden werden nicht gefunden, weil das HTML innerhalb dieser Seite gerendert wird und nicht aus seinem ursprünglichen Ordner, und Bilder auf anderen Hosts werden nur geladen, wenn dieser Host Cross-Origin-Zugriffe erlaubt. Auch Skripte werden nicht ausgeführt, sodass alles fehlt, was per JavaScript gezeichnet wird. Betten Sie Bilder als data:-URLs ein oder verwenden Sie vollständige https-Adressen.

Warum habe ich leere weiße Seiten bekommen?

Leere Seiten bedeuten, dass das HTML selbst bei 794 Pixel Breite nichts Sichtbares gezeichnet hat, zum Beispiel weil der Inhalt einer Seite per Skript eingefügt wird, das hier nicht ausgeführt wird, oder weil weißer Text auf weißem Hintergrund steht. Kann die Rendering-Bibliothek html2canvas nicht von cdnjs.cloudflare.com geladen werden, zeigt das Tool eine Fehlermeldung statt eines PDFs.

Zuletzt geprüft am