U vindt het perfecte artikel online en slaat het op als PDF via de browserprintfunctie. De resulterende PDF lijkt in niets op de webpagina die u aan het lezen was. Afbeeldingen ontbreken. Tekst overlapt. De lay-out die schoon en leesbaar was op het scherm, is een warboel op de PDF-pagina. De browserconversie van Web naar PDF is handig maar onnauwkeurig en produceert uitvoer die de originele webpagina benadert in plaats van repliceert.
Browser print-to-PDF-functies gebruiken het print-CSS-stylesheet van de webpagina, niet de scherm-CSS. Webontwikkelaars creëren vaak een vereenvoudigde lay-out speciaal voor afdrukken, waarbij navigatie, zijbalken en advertenties worden verwijderd. Deze afdruklay-out kan er dramatisch anders uitzien dan wat u op het scherm ziet. Het verschil is opzettelijk gemaakt, bedoeld om schonere afdrukken te produceren, maar het kan verrassend zijn.
Waarom de afdrukuitvoer van de browser verschilt van de schermweergave
Webpagina's gebruiken twee afzonderlijke CSS-stylesheets: één voor schermweergave en één voor afdrukken. Het schermstylesheet bepaalt wat u in de browser ziet. Het afdrukstylesheet bepaalt wat er verschijnt wanneer u afdrukt of opslaat als PDF. De twee stylesheets kunnen totaal verschillende lay-outs, lettertypen, kleuren en zelfs inhoud specificeren.
De conversie van PDF-formaat verwijdert ook interactieve elementen. Vervolgkeuzemenu's, inhoud met tabbladen, carrousels en accordeonsecties waarbij u moet klikken of zweven om de inhoud weer te geven, produceren onvolledige PDF-uitvoer. De PDF legt alleen de momenteel zichtbare status van deze elementen vast, wat hun samengevouwen of verborgen status kan zijn.
Het printstylesheet legt de meeste verrassingen uit.
Het printstylesheet is de belangrijkste boosdoener achter de meeste lay-outverrassingen.
Dynamische inhoud die door JavaScript wordt geladen nadat de pagina voor het eerst is geladen, verschijnt mogelijk niet in de PDF. Oneindige scrollpagina's, lui geladen afbeeldingen en inhoud waarvoor gebruikersinteractie nodig is om te laden, zijn bijzonder kwetsbaar. De browser drukt af wat er momenteel in de DOM is geladen, wat slechts een fractie van de totale pagina-inhoud kan zijn.
Veelvoorkomende afdrukproblemen en hoe u deze kunt oplossen
Ontbrekende afbeeldingen in de PDF-uitvoer zijn meestal het gevolg van het feit dat het afdrukstijlblad afbeeldingen verbergt om inkt te besparen, of van lui geladen afbeeldingen die niet waren geladen toen het afdrukken werd gestart. Blader door de hele pagina om lazyloading te activeren voordat u gaat afdrukken. Schakel het afdrukstylesheet uit in de browserontwikkelaarstools om te forceren dat de schermindeling wordt gebruikt voor afdrukken.
WukongPDF kan de resulterende PDF Viewing-uitvoer verwerken om de paginaafmetingen aan te passen en ongewenste elementen te verwijderen, maar kan geen inhoud herstellen die de browser heeft weggelaten tijdens het vastleggen van de afdruk.
Lezermodus gebruiken voor schonere PDF-uitvoer
De meeste browsers bevatten een leesmodus die de hoofdinhoud extraheert en deze in een overzichtelijk formaat met één kolom weergeeft. Activeer de leesmodus voordat u naar PDF afdrukt. De uitvoer in de leesmodus is eenvoudiger dan de volledige webpagina, maar betrouwbaarder, met een consistente tekststroom en geen ontbrekende inhoud.
Speciale tools voor webpagina-naar-PDF versus browserprint
Speciale tools voor het vastleggen van webpagina's produceren betrouwbaardere PDF-uitvoer dan browserafdrukfuncties. Deze tools geven de pagina volledig weer, wachten tot alle inhoud is geladen en leggen de schermindeling vast in plaats van de afdrukindeling. De uitvoer komt beter overeen met wat u op het scherm ziet.
Webpagina's die nauwkeurig als PDF's moeten worden vastgelegd, testen zowel de browserafdrukfunctie als een speciale opnametool. Vergelijk de uitvoer. De tool die voor de ene webpagina het beste resultaat oplevert, is voor een andere webpagina misschien niet de beste. De variabiliteit van het ontwerp van webpagina's betekent dat geen enkele methode perfect werkt voor alle pagina's.
Omgaan met webinhoud van meerdere pagina's
Lange artikelen die meerdere afgedrukte pagina's in de PDF-uitvoer beslaan, hebben vaak lastige pagina-einden die door afbeeldingen heen snijden of alinea's midden in een zin splitsen. Het browserpagineringsalgoritme begrijpt de inhoudsgrenzen niet. Het breekt pagina's op vaste posities op basis van het papierformaat.
Gebruik het afdrukvoorbeeld van de browser om te bepalen waar pagina-einden zullen voorkomen. Pas de afdrukschaal, marges of papiergrootte aan om pagina-einden naar meer natuurlijke posities te verplaatsen. Een kleine schaalverkleining, van 100 procent naar 95 procent, kan de pagina-einden voldoende verschuiven om de ergste splitsingen in de inhoud te voorkomen.
Voor artikelen die over veel PDF-pagina's zijn verdeeld, kunt u overwegen om na het vastleggen een PDF-editor te gebruiken om gefragmenteerde inhoud te combineren. Snijd individuele pagina-afbeeldingen bij en voeg ze opnieuw samen tot een doorlopend document dat natuurlijker verloopt dan de door de browser opgestelde pagina-einden.
Interactieve en dynamische inhoud behouden
Webpagina's met ingesloten video, audio of interactieve grafieken verliezen deze elementen in de PDF-uitvoer. De PDF legt een statisch beeld vast van de huidige status. Voor inhoud waarbij het interactieve element essentieel is, neemt u de URL van de originele webpagina op in de pdf, zodat lezers toegang hebben tot de volledige interactieve versie.
Het is mogelijk dat koppelingen in de vastgelegde PDF niet klikbaar zijn. De browserafdrukfunctie converteert tekst soms naar vectorcontouren of rasterafbeeldingen waarbij hyperlinks niet behouden blijven. Test de PDF-uitvoer door op een bekende link te klikken om de linkfunctionaliteit te verifiëren. Als links verloren gaan, gebruik dan een PDF-editor om ze handmatig weer toe te voegen.
Insluitingen van sociale media, commentaarsecties en dynamisch geladen gerelateerde inhoud overleven zelden het print-naar-PDF-proces. Als deze elementen belangrijk zijn, legt u ze afzonderlijk vast als schermafbeeldingen en voegt u ze in de PDF in nadat de hoofdinhoud is vastgelegd.
Webpagina's die zijn ontworpen met responsieve lay-outs kunnen voor de printengine een andere lay-out hebben dan voor het scherm. Een mobiel-responsief ontwerp dat er op een telefoon strak uitziet, kan worden afgedrukt als een smalle kolom met veel witruimte. Door de afdrukuitvoer bij verschillende browservensterbreedtes te testen, kunt u de venstergrootte identificeren die de beste PDF-uitvoer oplevert.
Webpagina's die CSS Grid of Flexbox voor de lay-out gebruiken, kunnen bij het afdrukken op een onvoorspelbare manier opnieuw worden geplaatst, omdat het afdrukstylesheet vaak de complexe schermindeling vervangt door een vereenvoudigde lineaire lay-out. Inhoud die naast elkaar op het scherm verscheen, wordt verticaal gestapeld in de PDF.
Aangepaste lettertypen die zijn geladen vanuit webservices zoals Google Fonts of Adobe Fonts zijn mogelijk niet beschikbaar voor de browserafdrukengine. De afdrukuitvoer vervangt systeemlettertypen, waardoor het uiterlijk van de tekst, de regellengte en pagina-einden worden gewijzigd.
Achtergrondafbeeldingen en verlopen die via CSS worden toegepast, worden doorgaans niet standaard afgedrukt om inkt te besparen. Een gedeelte dat voor de leesbaarheid afhankelijk was van een donkere achtergrond met lichte tekst, kan onzichtbaar worden wanneer de achtergrond wordt verwijderd en de lichte tekst blijft staan.
Webpagina's met vaste kopteksten of vastgezette navigatiebalken kunnen op elke pagina in het midden van de PDF-inhoud verschijnen. Deze elementen zijn gepositioneerd ten opzichte van de viewport, niet ten opzichte van de pagina-inhoud, en hun vaste positionering gaat verloren bij de PDF-conversie.
Het zoomniveau van de browser tijdens het afdrukken heeft invloed op de PDF-uitvoer. Een pagina afgedrukt met 100 procent zoom levert andere resultaten op dan dezelfde pagina afgedrukt met 75 procent zoom. Het zoomniveau verandert de tekstgrootte en het aantal pagina's.
Het afdrukken van een webpagina vanuit een mobiele browser levert andere resultaten op dan afdrukken vanuit een desktopbrowser, omdat mobiele browsers vaak een vereenvoudigde versie van de pagina aan de printengine doorgeven.
Bij webpagina's achter een inlog- of betaalmuur kan de afgedrukte PDF inhoud bevatten die pas na authenticatie zichtbaar was. De PDF wordt een registratie van de geverifieerde inhoud en moet met de juiste beveiliging worden behandeld.
Browserextensies die het uiterlijk van webpagina's wijzigen, zoals advertentieblokkers, extensies voor de donkere modus en aangepaste stylesheets, zijn van invloed op de afdrukuitvoer. De afgedrukte PDF geeft de gewijzigde pagina weer zoals de extensie deze presenteert.
Het opslaan van een webpagina als PDF is in wezen een momentopname van een dynamisch medium in een statisch formaat. Bij de conversie wordt de pagina op een bepaald moment vastgelegd, waardoor de inhoud wordt bevroren die enkele minuten later kan veranderen.
Voor archiveringsdoeleinden moet een PDF die is opgeslagen vanaf een webpagina de URL en de toegangsdatum bevatten in de metagegevens van het document of op de eerste pagina, zodat toekomstige lezers de originele bron kunnen vinden.
Webpagina's met zware JavaScript-frameworks zoals React, Angular of Vue geven mogelijk bijna niets weer in de PDF-uitvoer, omdat de printengine de pagina vastlegt voordat JavaScript klaar is met het bouwen van de DOM. Door enkele seconden te wachten nadat de pagina lijkt te zijn geladen voordat deze wordt afgedrukt, krijgt het raamwerk de tijd om de weergave te voltooien.
CSS-mediaquery's die op afdrukken zijn gericht, kunnen specifieke elementen verbergen of weergeven. Een goed ontworpen printstylesheet bevat de hoofdinhoud en sluit navigatie, advertenties en opmerkingen uit. Een slecht ontworpen of ontbrekende printstylesheet valt terug op de schermindeling, wat zich mogelijk niet goed vertaalt naar de vaste paginaafmetingen van een PDF.
De browsercache heeft invloed op de PDF-uitvoer bij het afdrukken van pagina's waarvoor verificatie vereist is. Als de browser inloggegevens in de cache heeft opgeslagen, bevat de afdrukuitvoer geverifieerde inhoud. Als de sessie is verlopen, kan de afdrukuitvoer een inlogpagina weergeven in plaats van de bedoelde inhoud. Controleer de pagina-inhoud voordat u afdrukt door door de hele pagina te bladeren.
Als u een webpagina afdrukt die ingesloten iframes van andere domeinen bevat, kunnen er lege gebieden ontstaan waar de iframe-inhoud zou moeten verschijnen. Cross-origin-beperkingen voorkomen dat de printengine toegang krijgt tot iframe-inhoud uit verschillende domeinen. De PDF-uitvoer toont lege rechthoeken waar de ingesloten inhoud op het scherm stond.
Voor kritische webpagina-opnamen gebruikt u de functie Opslaan als in de browser om de volledige webpagina, HTML en elementen op te slaan voordat u deze naar PDF afdrukt. De opgeslagen kopie dient als referentie voor hoe de pagina eruit zou moeten zien, en u kunt de PDF-uitvoer vergelijken met de opgeslagen kopie om te bepalen wat er tijdens de afdrukconversie verloren is gegaan.