Sie finden den passenden Artikel online und speichern ihn über die Druckfunktion des Browsers als PDF. Das resultierende PDF sieht überhaupt nicht wie die Webseite aus, die Sie gerade gelesen haben. Bilder fehlen. Textüberschneidungen. Das auf dem Bildschirm saubere und lesbare Layout ist auf der PDF-Seite ein wirres Durcheinander. Die Browser-Konvertierung Web in PDF ist praktisch, aber ungenau und erzeugt eine Ausgabe, die der ursprünglichen Webseite eher nahekommt als sie repliziert.
Browser-Druck-in-PDF-Funktionen verwenden das Druck-CSS-Stylesheet der Webseite, nicht das Bildschirm-CSS. Webentwickler erstellen oft ein vereinfachtes Layout speziell für den Druck, bei dem Navigation, Seitenleisten und Werbung weggelassen werden. Dieses Drucklayout kann sich erheblich von dem unterscheiden, was Sie auf dem Bildschirm sehen. Der Unterschied ist beabsichtigt und soll eine sauberere Druckausgabe ermöglichen, kann aber überraschend sein.
Warum sich die Browser-Druckausgabe von der Bildschirmanzeige unterscheidet
Webseiten verwenden zwei separate CSS-Stylesheets: eines für die Bildschirmanzeige und eines für den Druck. Das Bildschirm-Stylesheet steuert, was Sie im Browser sehen. Das Druck-Stylesheet steuert, was beim Drucken oder Speichern als PDF angezeigt wird. Die beiden Stylesheets können völlig unterschiedliche Layouts, Schriftarten, Farben und sogar Inhalte festlegen.
Bei der PDF-Format-Konvertierung werden auch interaktive Elemente entfernt. Dropdown-Menüs, Inhalte mit Registerkarten, Karussells und Akkordeonabschnitte, die zum Anzeigen von Inhalten angeklickt oder mit der Maus bewegt werden müssen, führen zu einer unvollständigen PDF-Ausgabe. Das PDF erfasst nur den aktuell sichtbaren Zustand dieser Elemente, bei dem es sich um ihren reduzierten oder ausgeblendeten Zustand handeln kann.
Das Print-Stylesheet erklärt die meisten Überraschungen.
Das Druck-Stylesheet ist der Hauptverursacher der meisten Layout-Überraschungen.
Dynamische Inhalte, die von JavaScript nach dem ersten Laden der Seite geladen werden, werden möglicherweise nicht im PDF angezeigt. Besonders anfällig sind endlose Scrollseiten, verzögert geladene Bilder und Inhalte, deren Laden eine Benutzerinteraktion erfordert. Der Browser druckt, was aktuell im DOM geladen ist, was möglicherweise nur einen Bruchteil des gesamten Seiteninhalts ausmacht.
Probieren Sie Word zu PDF aus
Keine Installation erforderlich. Funktioniert direkt in Ihrem Browser.
Häufige Druckprobleme und deren Behebung
Fehlende Bilder in der PDF-Ausgabe sind in der Regel darauf zurückzuführen, dass das Druck-Stylesheet Bilder ausblendet, um Tinte zu sparen, oder dass Bilder verzögert geladen wurden, die beim Druckstart noch nicht geladen wurden. Scrollen Sie durch die gesamte Seite, um das verzögerte Laden vor dem Drucken auszulösen. Deaktivieren Sie das Druck-Stylesheet in den Browser-Entwicklertools, um die Verwendung des Bildschirmlayouts zum Drucken zu erzwingen.
WukongPDF kann die resultierende PDF Viewing-Ausgabe verarbeiten, um die Seitenabmessungen anzupassen und unerwünschte Elemente zu entfernen, aber es kann keine Inhalte wiederherstellen, die der Browser während der Druckerfassung ausgelassen hat.
Verwenden des Lesemodus für eine sauberere PDF-Ausgabe
Die meisten Browser verfügen über einen Lesemodus, der den Hauptinhalt extrahiert und ihn in einem sauberen, einspaltigen Format anzeigt. Aktivieren Sie den Lesemodus, bevor Sie als PDF drucken. Die Ausgabe im Lesemodus ist einfacher als die der gesamten Webseite, aber zuverlässiger, mit konsistentem Textfluss und ohne fehlende Inhalte.
Dedizierte Webseiten-zu-PDF-Tools vs. Browser-Druck
Spezielle Tools zur Webseitenerfassung erzeugen eine zuverlässigere PDF-Ausgabe als Browser-Druckfunktionen. Diese Tools rendern die Seite vollständig, warten, bis der gesamte Inhalt geladen ist, und erfassen das Bildschirmlayout statt des Drucklayouts. Die Ausgabe entspricht eher dem, was Sie auf dem Bildschirm sehen.
Testen Sie bei Webseiten, die genau als PDFs erfasst werden müssen, sowohl die Browser-Druckfunktion als auch ein spezielles Erfassungstool. Vergleichen Sie die Ausgabe. Das Tool, das für eine Webseite das beste Ergebnis liefert, ist möglicherweise nicht das beste für eine andere. Aufgrund der Variabilität des Webseitendesigns funktioniert keine einzelne Methode perfekt für alle Seiten.
Umgang mit mehrseitigen Webinhalten
Lange Artikel, die sich in der PDF-Ausgabe über mehrere gedruckte Seiten erstrecken, weisen oft unangenehme Seitenumbrüche auf, die Bilder durchschneiden oder Absätze mitten im Satz teilen. Der Browser-Paginierungsalgorithmus kennt keine Inhaltsgrenzen. Es bricht Seiten an festen Positionen basierend auf dem Papierformat um.
Verwenden Sie die Druckvorschau des Browsers, um zu erkennen, wo Seitenumbrüche auftreten. Passen Sie den Druckmaßstab, die Ränder oder das Papierformat an, um Seitenumbrüche an natürlichere Positionen zu verschieben. Durch eine leichte Skalierungsreduzierung von 100 Prozent auf 95 Prozent können Seitenumbrüche so weit verschoben werden, dass die schlimmsten Inhaltsaufteilungen vermieden werden.
Bei Artikeln, die über viele PDF-Seiten verteilt sind, sollten Sie nach der Erfassung die Verwendung eines PDF-Editors in Betracht ziehen, um fragmentierte Inhalte zu kombinieren. Schneiden Sie einzelne Seitenbilder zu und fügen Sie sie zu einem fortlaufenden Dokument zusammen, das natürlicher verläuft als die vom Browser vorgegebenen Seitenumbrüche.
Bewahrung interaktiver und dynamischer Inhalte
Bei Webseiten mit eingebettetem Video, Audio oder interaktiven Diagrammen gehen diese Elemente in der PDF-Ausgabe verloren. Das PDF erfasst ein statisches Bild des aktuellen Zustands. Fügen Sie bei Inhalten, bei denen das interaktive Element wesentlich ist, die URL der Originalwebseite in die PDF-Datei ein, damit Leser auf die vollständige interaktive Version zugreifen können.
Links im erfassten PDF sind möglicherweise nicht anklickbar. Die Druckfunktion des Browsers konvertiert manchmal Text in Vektorkonturen oder Rasterbilder, die keine Hyperlinks beibehalten. Testen Sie die PDF-Ausgabe, indem Sie auf einen bekannten Link klicken, um die Linkfunktionalität zu überprüfen. Wenn Links verloren gehen, fügen Sie sie mithilfe eines PDF-Editors manuell wieder hinzu.
Einbettungen in sozialen Medien, Kommentarbereiche und dynamisch geladene verwandte Inhalte überleben den Druck-zu-PDF-Prozess selten. Wenn diese Elemente wichtig sind, erfassen Sie sie separat als Screenshots und fügen Sie sie nach der Hauptinhaltserfassung in das PDF ein.
Webseiten, die mit responsiven Layouts gestaltet sind, können für die Druckmaschine ein anderes Layout als für den Bildschirm darstellen. Ein auf Mobilgeräte ansprechendes Design, das auf einem Telefon sauber aussieht, wird möglicherweise als schmale Spalte mit übermäßigem Leerraum gedruckt. Durch Testen der Druckausgabe bei unterschiedlichen Browserfensterbreiten lässt sich die Fenstergröße ermitteln, die die beste PDF-Ausgabe erzeugt.
Webseiten, die CSS Grid oder Flexbox für das Layout verwenden, können beim Drucken unvorhersehbar umfließen, da das Druck-Stylesheet häufig das komplexe Bildschirmlayout durch ein vereinfachtes lineares Layout ersetzt. Inhalte, die nebeneinander auf dem Bildschirm angezeigt wurden, werden im PDF vertikal gestapelt angezeigt.
Benutzerdefinierte Schriftarten, die von Webdiensten wie Google Fonts oder Adobe Fonts geladen werden, stehen der Druck-Engine des Browsers möglicherweise nicht zur Verfügung. Die Druckausgabe ersetzt Systemschriftarten und ändert das Erscheinungsbild des Textes, die Zeilenlänge und die Seitenumbrüche.
Über CSS angewendete Hintergrundbilder und Verläufe werden normalerweise nicht standardmäßig gedruckt, um Tinte zu sparen. Ein Abschnitt, der zur besseren Lesbarkeit auf einen dunklen Hintergrund mit hellem Text angewiesen war, wird möglicherweise unsichtbar, wenn der Hintergrund entfernt wird und der helle Text erhalten bleibt.
Webseiten mit festen Kopfzeilen oder eingeklemmten Navigationsleisten können auf jeder Seite in der Mitte des PDF-Inhalts erscheinen. Diese Elemente werden relativ zum Ansichtsfenster positioniert, nicht zum Seiteninhalt, und ihre feste Positionierung geht bei der PDF-Konvertierung verloren.
Die Zoomstufe des Browsers beim Drucken wirkt sich auf die PDF-Ausgabe aus. Eine mit 100 Prozent Zoom gedruckte Seite führt zu anderen Ergebnissen als dieselbe Seite, die mit 75 Prozent Zoom gedruckt wird. Die Zoomstufe ändert die Textgröße und die Seitenzahl.
Das Drucken einer Webseite über einen mobilen Browser führt zu anderen Ergebnissen als das Drucken über einen Desktop-Browser, da mobile Browser der Druckmaschine häufig eine vereinfachte Version der Seite bereitstellen.
Bei Webseiten hinter einem Login oder einer Paywall kann das gedruckte PDF Inhalte enthalten, die erst nach der Authentifizierung sichtbar waren. Das PDF wird zu einer Aufzeichnung des authentifizierten Inhalts und sollte mit angemessener Sicherheit behandelt werden.
Browsererweiterungen, die das Erscheinungsbild der Webseite ändern, wie Werbeblocker, Dark-Mode-Erweiterungen und benutzerdefinierte Stylesheets, wirken sich auf die Druckausgabe aus. Das gedruckte PDF spiegelt die geänderte Seite so wider, wie sie von der Erweiterung dargestellt wird.
Das Speichern einer Webseite als PDF ist im Grunde eine Momentaufnahme eines dynamischen Mediums in ein statisches Format. Die Konvertierung erfasst die Seite zu einem bestimmten Zeitpunkt und friert Inhalte ein, die sich Minuten später ändern können.
Zu Archivierungszwecken sollte ein von einer Webseite gespeichertes PDF die URL und das Zugriffsdatum in den Metadaten des Dokuments oder auf der ersten Seite enthalten, damit zukünftige Leser die Originalquelle finden können.
Webseiten mit umfangreichen JavaScript-Frameworks wie React, Angular oder Vue rendern möglicherweise fast nichts in der PDF-Ausgabe, da die Druck-Engine die Seite erfasst, bevor JavaScript den Aufbau des DOM abgeschlossen hat. Wenn Sie vor dem Drucken einige Sekunden warten, nachdem die Seite geladen zu sein scheint, hat das Framework Zeit, das Rendern abzuschließen.
CSS-Medienabfragen, die auf den Druck abzielen, können bestimmte Elemente ein- oder ausblenden. Ein gut gestaltetes Print-Stylesheet umfasst den Hauptinhalt und schließt Navigation, Anzeigen und Kommentare aus. Ein schlecht gestaltetes oder fehlendes Druck-Stylesheet greift auf das Bildschirmlayout zurück, das sich möglicherweise nicht gut auf die festen Seitenabmessungen einer PDF-Datei übertragen lässt.
Der Browser-Cache wirkt sich auf die PDF-Ausgabe aus, wenn Seiten gedruckt werden, die eine Authentifizierung erfordern. Wenn der Browser über zwischengespeicherte Anmeldeinformationen verfügt, enthält die Druckausgabe authentifizierte Inhalte. Wenn die Sitzung abgelaufen ist, wird in der Druckausgabe möglicherweise eine Anmeldeseite anstelle des beabsichtigten Inhalts angezeigt. Überprüfen Sie den Seiteninhalt vor dem Drucken, indem Sie durch die gesamte Seite scrollen.
Beim Drucken einer Webseite, die eingebettete Iframes von anderen Domänen enthält, können leere Bereiche entstehen, in denen der Iframe-Inhalt erscheinen sollte. Cross-Origin-Einschränkungen verhindern, dass die Druck-Engine auf Iframe-Inhalte aus verschiedenen Domänen zugreift. Die PDF-Ausgabe zeigt leere Rechtecke an der Stelle, an der sich der eingebettete Inhalt auf dem Bildschirm befand.
Verwenden Sie für die Erfassung wichtiger Webseiten die Funktion „Speichern unter“ des Browsers, um die gesamte Webseite, HTML und Assets zu speichern, bevor Sie sie als PDF drucken. Die gespeicherte Kopie dient als Referenz dafür, wie die Seite aussehen sollte, und Sie können die PDF-Ausgabe mit der gespeicherten Kopie vergleichen, um festzustellen, was bei der Druckkonvertierung verloren gegangen ist.
Probieren Sie Word zu PDF aus
Keine Installation erforderlich. Funktioniert direkt in Ihrem Browser.