Een HTML-bestand naar PDF omzetten met de opmaak intact
Door het team van FreePDF ·
Een .html-bestand doorsturen is een wankele zaak. Op de computer waar het gemaakt is ziet het er goed uit, en vervolgens komt het zonder stylesheet aan, of opent het in een browser die anders opmaakt, of wordt het als bijlage geblokkeerd. Er een PDF van maken zet de pagina vast: één bestand, overal dezelfde opmaak, en het print zoals het eruitziet.
Wat meekomt en wat niet
Upload het .html- of .htm-bestand; het wordt naar PDF gerenderd zoals een browser het voor de printer zou renderen. Drie dingen zijn het waard om vooraf te weten:
- De CSS in het bestand wordt toegepast. Alles in een
<style>-blok of eenstyle=-attribuut komt mee: lettertypen, kleuren, randen, tabellen, achtergronden. - JavaScript wordt niet uitgevoerd. De pagina wordt gerenderd zoals ze in het bestand staat. Wordt een grafiek of tabel bij het laden door een script getekend, dan krijgt de PDF de lege houder waarmee het begon.
- Relatieve paden komen nergens uit. Een geüpload bestand heeft geen adres om relatief aan te zijn, dus
<img src="images/logo.png">of<link href="style.css">wijst naar niets. Absolutehttps://-URL's worden normaal opgehaald.
De oplossing voor dat laatste is een pagina die op zichzelf staat: plak de CSS in een <style>-blok en gebruik voor afbeeldingen volledige URL's of neem ze op als data:-URI. De meeste tools die HTML-rapporten maken — en „Pagina opslaan als → één bestand” in je browser — doen dit al.
Papierformaat en marges regel je vanuit de CSS
Omdat er als printuitvoer wordt gerenderd, geldt de print-CSS. Genereer je de HTML zelf, dan kom je met een paar regels een heel eind:
@page { size: A4; margin: 20mm; }zet het papierformaat en de marges. GebruikLetterin plaats vanA4als dat jouw formaat is.break-before: pageop een kop laat elk hoofdstuk op een nieuw blad beginnen.break-inside: avoidop een tabel of een kader voorkomt dat die over twee pagina's wordt gesneden.- Regels binnen
@media printwerken, dus navigatie, banners en al het andere dat je een printer zou onthouden blijven buiten de PDF.
Wanneer het printvenster van je browser beter is
Even helder, want vaak is dat het juiste antwoord: wil je een levende webpagina als PDF bewaren, open die pagina dan en print naar PDF. De browser heeft de pagina al geladen, met haar afbeeldingen, met uitgevoerde scripts en met jouw inlog, en legt dus dingen vast die in een geüpload bestand gewoon niet zitten.
Het bestand hier omzetten is de betere route als je een op zichzelf staande .html op schijf hebt — een factuur uit de mail, een rapport dat een script wegschreef, de export van een tool, een opgeslagen bonnetje — en je een schone PDF wilt, zonder de kop- en voetteksten en paginanummers die de browser zelf langs de randen stempelt. Het is ook reproduceerbaar: hetzelfde bestand levert elke keer en op elke machine dezelfde PDF, wat een printvenster vol per-computer-instellingen niet doet.
En moet het document nog geschreven worden in plaats van omgezet, dan slaat Markdown dit hele probleem over: geen CSS om te beheren en geen afbeeldingen om na te jagen.
Veelgestelde vragen
Kan ik een URL geven in plaats van een bestand?
Nee — er wordt een bestand omgezet dat jij uploadt. Sla de pagina eerst op (Ctrl+S / Cmd+S, met de optie voor één bestand als je browser die biedt) en upload dat. Zit de pagina achter een login, dan is zelf opslaan toch al de enige manier om de inhoud eruit te krijgen.
Mijn PDF kwam er zonder opmaak uit. Wat ging er mis?
Bijna altijd een stylesheet die in een apart bestand woont. De HTML verwijst naar style.css, geüpload was alleen de HTML, en dan is er niets om te laden. Open het bestand in een teksteditor, zet de CSS in een <style>-blok in de <head>, en zet opnieuw om.