HTML naar PDF omzetten: print-CSS, window.print() | We.Inc
Maak van HTML een nette PDF: sla op via het afdrukvenster, schrijf print-CSS met @page en break-inside, roep window.print() aan of render op een server. Met een print-CSS-builder.
De snelste manier om een webpagina naar PDF om te zetten is het afdrukvenster van de browser zelf: open het, kies PDF als bestemming en sla op. Om te bepalen hoe die PDF eruitziet voegt u print-CSS toe met @media print en @page voor papierformaat en marges. Voor automatisch gemaakte PDF's rendert u de pagina met een headless browser zoals Puppeteer of Playwright.
Manieren om een PDF te maken van HTML
Methode
Draait waar
Tekst selecteerbaar
Het best voor
Afdrukvenster, opslaan als PDF
Elke desktopbrowser
Ja
Eenmalige kopieën van een pagina
Knop met window.print()
De browser van de bezoeker
Ja
Facturen, bonnen, tickets
Puppeteer page.pdf()
Node.js die Chrome aanstuurt
Ja
Automatische rapporten op een server
Playwright page.pdf()
Een Playwright-script dat een browser aanstuurt
Ja
Automatische PDF's binnen een bestaande testopstelling
De browser van de bezoeker
Nee, de pagina wordt een afbeelding
Snelle downloads in de browser
jsPDF
De browser van de bezoeker
Ja, voor tekst die u tekent
Een PDF opbouwen uit data in code
Elke methode op deze pagina vraagt uiteindelijk een browser-engine om de pagina op papier op te maken, dus goede print-CSS verbetert ze allemaal. Bouw hieronder een eerste print-stylesheet en kies dan de route die past bij wie op de knop drukt: een persoon, uw pagina of een server.
Kies een papierformaat, oriëntatie en marge voor de @page-regel.
Vink de extra's aan die u nodig hebt: navigatie verbergen, blokken bij elkaar houden, linkadressen afdrukken, achtergrondkleuren behouden.
Kopieer de CSS naar uw stylesheet; die geldt alleen bij het afdrukken.
Open het afdrukvoorbeeld in uw browser en kies PDF als bestemming om het resultaat te controleren.
Gebruik het afdrukvoorbeeld als testbank. Het werkt bij elke CSS-wijziging bij en kost niets.
Verberg navigatie, cookiebanners en zijbalken bij het afdrukken; op papier kan niemand erop klikken.
Houd tabellen, figuren en codeblokken heel met break-inside: avoid.
Browsers laten achtergrondkleuren standaard weg bij het afdrukken. print-color-adjust: exact vraagt ze die van u te behouden, maar de afdrukinstellingen van de bezoeker winnen nog steeds.
Gebruik pt, mm of in voor afdrukmaten als u exacte fysieke afmetingen nodig hebt.
Veelgestelde vragen
Hoe sla ik een webpagina op als PDF zonder extra tools?
Open het afdrukvenster van de browser via het menu of de sneltoets en kies de PDF-optie in de lijst met bestemmingen of printers. De precieze naam hangt af van de browser en het besturingssysteem.
Hoe voeg ik een knop PDF downloaden toe aan mijn pagina?
De eenvoudigste eerlijke versie is een knop die window.print() aanroept. Die opent hetzelfde venster, waar de bezoeker kan opslaan als PDF. Er is geen bibliotheek nodig, tekst blijft selecteerbaar en uw print-CSS wordt gebruikt.
Hoe voorkom ik dat een tabel over twee pagina's wordt verdeeld?
Voeg break-inside: avoid toe aan de tabel, of aan de rijen als de tabel lang is. Het oudere page-break-inside: avoid wordt als alias behandeld, dus het werkt nog steeds in oudere stylesheets.
Kan ik het papierformaat vanuit CSS instellen?
Ja. @page { size: A4 portrait; margin: 15mm; } stelt het formaat en de marges van de paginabox in. Puppeteer gebruikt dit alleen als preferCSSPageSize true is; anders beslist de eigen format-optie, standaard Letter.
Waarom maakt html2pdf.js wazige of enorme PDF's?
De README legt uit dat het de inhoud rendert tot een afbeelding en die afbeelding in de PDF plaatst, dus de tekst is niet selecteerbaar of doorzoekbaar en bestanden worden groot. Gebruik afdrukken of een headless browser als de tekst ertoe doet.
Print-CSS is de basis
Met een @media print-blok geeft u de pagina een andere stijl voor papier zonder het schermontwerp aan te raken. Verberg wat op papier geen zin heeft, maak de contentkolom breder en stel een leesbare lettergrootte in.
De @page-regel bepaalt de paginabox zelf: formaat, marges en oriëntatie, met :first, :left en :right om specifieke pagina's anders te behandelen. MDN vermeldt @page sinds december 2024 als Baseline newly available, waarbij sommige onderdelen nog per browser verschillen.
Wanneer renderen op een server
Als PDF's zonder tussenkomst van een persoon gemaakt moeten worden, zoals een nachtelijk rapport of een gemailde factuur, draai dan een headless browser. page.pdf() van Puppeteer drukt af met het print-mediatype, accepteert opties zoals format, margin en printBackground, en kan direct naar een bestandspad opslaan.
Renderen op de server geeft elke keer hetzelfde resultaat, omdat u de browserversie en lettertypen zelf beheert. Het betekent ook dat u die browser moet draaien en beveiligen, dus begin er pas aan als een afdrukknop niet volstaat.
Naslag print-CSS
Regels en eigenschappen die afgedrukte pagina's vormgeven
CSS
Waarden
Gebruik
@media print { }
Elke regel
Stijlen die alleen gelden bij afdrukken of opslaan als PDF
@page { size }
A5, A4, A3, B5, B4, letter, legal, ledger of lengtes; portrait of landscape
Papierformaat en oriëntatie
@page { margin }
Lengtes
Marges van elke pagina
@page :first
Pseudoklasse
Andere marges op de eerste pagina
auto, avoid, avoid-page, avoid-column
Een blok op één pagina houden
break-before / break-after
auto, avoid, page, left, right
Een pagina-einde bij een blok afdwingen of voorkomen
economy, exact
Of de browser kleuren en achtergronden mag weglaten
Afdrukvoorbeelden om te kopiëren
Een knop afdrukken of opslaan als PDF
window.print() opent het afdrukvenster en blokkeert de pagina tot het sluit. De class houdt de knop zelf van het papier.
Factuuropmaak waarbij elke factuur op een nieuwe pagina begint
break-after: page na elke factuur geeft één factuur per vel als er meerdere tegelijk worden afgedrukt.
De pagina vlak voor het afdrukken voorbereiden
beforeprint en afterprint worden rond het venster afgevuurd, handig om ingeklapte secties uit te klappen.
PDF op de server met Puppeteer
Met preferCSSPageSize wint uw @page-formaat van de format-optie; printBackground behoudt achtergronden.