PDFMove
Webseite in PDF umwandeln: So funktioniert die URL- und HTML-Konvertierung
Anleitung

Webseite in PDF umwandeln: So funktioniert die URL- und HTML-Konvertierung

7 Min. Lesezeit

Sie möchten eine Webseite archivieren, einen Artikel zum Offline-Lesen sichern, eine Bestellung als Dokument aufbewahren oder aus Ihrem eigenen HTML einen Bericht erzeugen. Die Umwandlung von HTML in PDF ist die Antwort auf diese Anforderungen — allerdings bringt die Natur von Webseiten einige Überraschungen mit sich.

Zwei unterschiedliche Anwendungsfälle

URL-Konvertierung: Sie geben eine Webadresse an, das Werkzeug lädt die Seite und erzeugt ein PDF. Wird zum Archivieren und Sichern verwendet.

HTML-Code-Konvertierung: Sie übergeben Ihr eigenes, selbst erstelltes HTML. Wird eingesetzt, um Dokumente wie Rechnungen, Berichte oder Zertifikate programmatisch zu erzeugen.

Beide nutzen dieselbe Engine, aber Sie stoßen auf unterschiedliche Probleme.

Schritt 1: Prüfen Sie, ob die Seite überhaupt konvertierbar ist

Wenn Sie eine URL konvertieren, bereiten manche Seiten Schwierigkeiten:

Seiten mit Anmeldepflicht. Das Werkzeug ruft die Adresse eigenständig auf und überträgt Ihre Sitzungsdaten nicht mit. Das Ergebnis ist ein PDF der Login-Maske oder einer Fehlerseite. Für solche Seiten müssen Sie im Browser bei geöffneter Sitzung "Als PDF drucken" verwenden.

Inhalte hinter einer Bezahlschranke. Dasselbe Problem.

Per JavaScript nachgeladene Inhalte. Manche Websites laden Inhalte erst nach dem Seitenaufbau über separate Anfragen. Erstellt das Werkzeug das PDF, bevor der Inhalt geladen ist, erhalten Sie eine leere oder unvollständige Seite. Gute Werkzeuge warten den Seitenaufbau ab, bei Seiten mit Endlos-Scrollen (Infinite Scroll) lässt sich der vollständige Inhalt jedoch nie erfassen.

Seiten mit Bot-Schutz. Manche Websites blockieren automatisierte Zugriffe.

Cookie-Hinweise und Pop-ups. Diese landen mit im PDF und können Teile des Inhalts verdecken.

Schritt 2: Verstehen Sie die Druckstile

Das ist der Punkt, der am meisten überrascht.

Die meisten Websites definieren im CSS zwei getrennte Stilsätze:

/* Für den Bildschirm */
nav { display: block; }

/* Für den Druck */
@media print {
  nav, .sidebar, .ads { display: none; }
  body { font-size: 12pt; color: #000; }
}

Die PDF-Erzeugung verwendet die Druckstile. Das ist in der Regel eine gute Sache:

  • Menüs, Seitenleisten und Werbung werden ausgeblendet.
  • Farben werden vereinfacht, der Text wird besser lesbar.
  • Es wird ein an die Seitenbreite angepasstes Layout angewendet.

Manchmal entstehen dadurch aber auch unerwünschte Ergebnisse:

  • Ein wichtiger Infokasten kann verschwinden.
  • Die visuelle Identität der Website geht verloren.
  • Manche Websites haben gar keine Druckstile definiert, und das Layout gerät durcheinander.

Hinzu kommt das responsive Design: Passt eine Seite ihr Layout an die Bildschirmbreite an, kann die PDF-Seitenbreite (bei A4 rund 794 Pixel) die mobile Darstellung auslösen. Das Ergebnis ist eine andere Anordnung als die, die Sie am Desktop sehen.

Schritt 3: Legen Sie die Seiteneinstellungen fest

Was Sie vor der Konvertierung einstellen sollten:

Seitenformat. A4 ist der Standard in Europa; Letter wird in den USA verwendet. Soll das Dokument gedruckt werden, wählen Sie das für die Zielregion passende Format.

Ausrichtung. Hochformat ist der Standard. Für Seiten mit breiten Tabellen oder querformatigen Grafiken kann das Querformat bessere Ergebnisse liefern.

Ränder. Der Standardwert liegt meist bei 1–2 cm. Ein Wert von null zieht den Inhalt bis an den Rand, doch Drucker können einen Bereich von etwa 5 mm am Rand nicht bedrucken — soll das Dokument gedruckt werden, lassen Sie Rand stehen.

Skalierung. Ist die Seite sehr breit, kann verkleinert werden. Zu starkes Verkleinern macht den Text jedoch unlesbar; Werte unter 70 % sind meist problematisch.

Hintergrundgrafiken. Standardmäßig deaktiviert — ein fest eingebautes Verhalten zum Sparen von Tinte. Bei Designs mit dunklem Hintergrund kann der Text unlesbar werden, wenn diese Option ausgeschaltet bleibt (weißer Text auf schwarzem Grund wird zu Weiß auf Weiß, sobald der Grund nicht mitgedruckt wird). Unter Umständen müssen Sie sie einschalten.

Kopf-/Fußzeile. Beim Drucken über den Browser werden Seitentitel, URL und Datum automatisch ergänzt. Fürs Archivieren nützlich, für ein aufgeräumtes Dokument womöglich unerwünscht.

Schritt 4: Konvertieren Sie

Öffnen Sie das Werkzeug zur HTML-zu-PDF-Konvertierung, geben Sie die URL ein oder fügen Sie Ihren HTML-Code ein, legen Sie die Einstellungen fest und starten Sie die Konvertierung.

Während des Vorgangs lädt das Werkzeug die Seite, wendet die Stile an, berechnet das Layout und teilt es auf Seiten auf.

Schritt 5: Prüfen Sie das Ergebnis

Ist der Inhalt vollständig? Sind insbesondere die per JavaScript nachgeladenen Abschnitte enthalten?

Sind die Seitenumbrüche sinnvoll? Wurde eine Tabelle mittendrin zerteilt? Steht eine Überschrift allein am Seitenende? Ist ein Bild in der Mitte abgeschnitten?

Funktionieren die Links? Gute Konvertierer wandeln Hyperlinks in PDF-Links um. Testen Sie einige davon.

Lässt sich der Text markieren? Ist der Text als echter Text übernommen worden, oder wurde die Seite in ein Bild verwandelt? Markierbarer Text ist deutlich wertvoller, weil er durchsuchbar und kopierbar ist.

Werden Sonderzeichen korrekt dargestellt? Prüfen Sie Umlaute und Sonderzeichen wie ä, ö, ü und ß.

Farben und Hintergründe. Sieht das Ergebnis so aus, wie Sie es erwartet haben?

Ist die Seitenzahl plausibel? Fällt das Dokument unerwartet lang aus, kann die Seite verborgene oder mehrfach vorhandene Inhalte enthalten.

Wenn Sie Ihr eigenes HTML konvertieren

Erzeugen Sie Dokumente wie Rechnungen, Berichte oder Zertifikate aus HTML, haben Sie das Layout vollständig in der Hand. Diese CSS-Regeln können Sie nutzen:

Seitenformat und Ränder:

@page {
  size: A4;
  margin: 2cm;
}

Steuerung der Seitenumbrüche:

/* Dieses Element soll nicht getrennt werden */
table, figure { page-break-inside: avoid; }

/* Vor diesem Element soll eine neue Seite beginnen */
h1 { page-break-before: always; }

/* Direkt nach der Überschrift soll kein Seitenumbruch stehen */
h2 { page-break-after: avoid; }

Kontrolle von Schusterjungen und Hurenkindern:

p {
  orphans: 3;  /* mindestens 3 Zeilen am Seitenende */
  widows: 3;   /* mindestens 3 Zeilen am Seitenanfang */
}

Linkadressen sichtbar machen:

@media print {
  a[href]::after { content: " (" attr(href) ")"; }
}

Damit ist in einem gedruckten Dokument erkennbar, wohin die Links führen.

Schriftwahl. Webschriften (etwa Google Fonts) werden von externen Quellen geladen. Besteht in der Konvertierungsumgebung kein Zugriff auf diese Quellen, wird die Schrift nicht geladen und das Layout verschiebt sich. Bei wichtigen Dokumenten ist es sicherer, die Schrift einzubetten oder Systemschriften zu verwenden.

Häufige Probleme

| Problem | Ursache | Lösung | |---|---|---| | Seite bleibt leer | JavaScript-Inhalt nicht geladen | Wartezeit einstellen oder aus dem Browser drucken | | Hintergründe fehlen | Standardeinstellung | Option für Hintergrundgrafiken aktivieren | | Menüs und Werbung erscheinen | Kein Druckstil definiert | Aus dem Browser drucken und den Lesemodus nutzen | | Layout in mobiler Ansicht | Responsives Design ausgelöst | Seitenbreite erhöhen oder Querformat wählen | | Tabelle wird zerteilt | Keine Steuerung der Seitenumbrüche | Bei eigenem HTML eine CSS-Regel ergänzen | | Andere Schriftart | Webschrift nicht geladen | Systemschrift verwenden | | Links sind nicht anklickbar | Grenze des Konvertierers | Eine andere Methode ausprobieren | | Login-Seite im PDF | Sitzung wird nicht übertragen | Aus dem Browser drucken |

Alternative: Drucken über den Browser

In manchen Fällen liefert die browsereigene Funktion "Als PDF drucken" das bessere Ergebnis:

Seiten mit Anmeldepflicht. Sie sind ohnehin bereits angemeldet.

JavaScript-lastige Seiten. Der Inhalt ist bereits geladen.

Personalisierte Inhalte. Ihr Warenkorb, Ihr Konto, Ihre Einstellungen.

Der Preis dafür: Der Browser wendet seine eigenen Seiteneinstellungen an und ergänzt meist eine Kopf-/Fußzeile. Diese Einstellungen können Sie im Druckdialog anpassen.

Auch der "Lesemodus" mancher Browser ist nützlich: Er befreit die Seite von Menüs und Werbung und zeigt nur den Artikeltext. Ein in diesem Modus erzeugtes PDF fällt deutlich aufgeräumter aus.

Fazit

Die Umwandlung von HTML in PDF erzeugt anhand der Druckstile einer Webseite ein Dokument, das in feste Seiten aufgeteilt ist. Dass das Ergebnis anders aussieht als am Bildschirm, ist normal — Menüs werden ausgeblendet, Farben vereinfacht, und responsives Design kann in ein anderes Layout wechseln. Hintergrundgrafiken werden standardmäßig nicht gedruckt, und bei Designs mit dunklem Hintergrund muss diese Option unter Umständen aktiviert werden. Bei Seiten mit Anmeldepflicht und per JavaScript nachgeladenen Inhalten ist die Druckfunktion des Browsers zuverlässiger. Wenn Sie Ihr eigenes HTML konvertieren, können Sie die Seitenumbrüche mit CSS-Regeln wie @page, page-break-inside und orphans/widows steuern und so ein professionelles Ergebnis erzielen.

Häufig gestellte Fragen

Warum sieht die PDF-Fassung der Seite anders aus als das, was ich am Bildschirm sehe?

Weil die meisten Websites getrennte Stile für Bildschirm und Druck definieren. Im CSS greifen dann die @media print-Regeln, und Elemente wie Menüs, Seitenleisten oder Werbung werden ausgeblendet, Farben vereinfacht. Das ist meist gewollt — die Ausgabe wird sauberer — aber gelegentlich verschwinden auch wichtige Inhalte. Hinzu kommt: Responsive Layouts, die sich an der Bildschirmbreite orientieren, wechseln bei PDF-Seitenbreite in eine andere Darstellung.

Kann ich Seiten in PDF umwandeln, für die eine Anmeldung nötig ist?

In der Regel nicht. Ein Werkzeug, das eine URL konvertiert, ruft die Adresse eigenständig auf und überträgt Ihre Sitzungsdaten nicht mit. Bei Seiten mit Anmeldepflicht landet deshalb entweder die Login-Maske oder eine Fehlerseite im PDF. Für solche Seiten müssen Sie im Browser bei geöffneter Sitzung die Funktion 'Als PDF drucken' verwenden.

Warum fehlen Hintergrundfarben und -bilder?

Druck-Engines geben Hintergrundgrafiken standardmäßig nicht aus — ein fest eingebautes Verhalten zum Sparen von Tinte. Im Druckdialog des Browsers gibt es die Option 'Hintergrundgrafiken', die aktiviert werden muss. Auch Konvertierungswerkzeuge bieten oft eine vergleichbare Einstellung. Bei Designs mit dunklem Hintergrund kann der Text unlesbar werden, wenn diese Option ausgeschaltet bleibt.

Wie wird eine lange Seite im PDF aufgeteilt?

Sie wird in Abschnitte von Seitenhöhe zerlegt, und die Trennstelle kann mitten im Inhalt liegen — eine Tabelle wird auseinandergerissen, ein Bild in der Mitte abgeschnitten. CSS-Regeln wie page-break-inside: avoid können das steuern, müssen aber im Code der Seite selbst hinterlegt sein. Wenn Sie Ihr eigenes HTML konvertieren, können Sie diese Regeln ergänzen.

Probieren Sie es gleich mit HTML/URL → PDF aus.

HTML/URL → PDF ausprobieren