Hoe HTML naar PDF te converteren

· 3 min leestijd

PDF's maken vanuit HTML is nuttig voor het genereren van facturen, rapporten, brieven, certificaten — elk document waarin u de lay-out met CSS wilt bedienen maar als PDF wilt distribueren.

Hoe HTML naar PDF te converteren

  1. Plak uw HTML — voer uw HTML-code in, inclusief inline CSS of <style>-tags, in de editor. De code kan de volledige paginastructuur bevatten met kopteksten, tabellen, afbeeldingen en stijlen.
  2. Bekijk het resultaat in voorbeeld — een live voorbeeld toont precies hoe uw PDF zal worden weergegeven naarmate u typt. Pas HTML en CSS aan totdat het resultaat overeenkomt met uw verwachtingen.
  3. Genereer en download — klik op de generatieknop om de PDF in uw browser te maken en download deze direct.

Wat u kunt maken

Stijl-tips voor de PDF-uitvoer

Gebruik inline stijlen of <style>-tags — externe stijlbladen worden niet geladen. Plaats al uw CSS ofwel inline op de elementen, ofwel in een <style>-blok van de HTML.

Definieer de paginamarges — gebruik @page { margin: 20mm; } in CSS om de ruimte rond uw inhoud in de PDF te bedienen.

Gebruik printvriendelijke eenhedenmm, cm en pt zijn voorspelbaarder in PDF's dan px of rem. Gebruik mm voor marges en spatiëringen die overeen moeten komen met fysieke afmetingen.

Vermijd lay-outs die afhankelijk zijn van het venster — percentage-breedten en vaste pixel-breedten werken beter. Aan-venster-gerelateerde eenheden (vw, vh) gedragen zich mogelijk niet zoals verwacht in de PDF.

Tips

Veelgestelde vragen

Behoudt de PDF mijn CSS-stijl?

Ja. De converter rendert uw HTML met het CSS toegepast, inclusief kleuren, lettertypen, marges en lay-out. De PDF lijkt op de gerenderde webpagina, niet op de ruwe broncode.

Kan ik afbeeldingen in de PDF opnemen?

Ja. Gebruik base64-afbeeldingen (Data URI) voor de meest betrouwbare resultaten. Externe afbeeldings-URL's kunnen werken als ze toegankelijk en CORS-compatibel zijn.

Wordt mijn HTML naar een server verzonden?

Nee. De conversie vindt volledig plaats in uw browser. Uw code en de gegenereerde PDF verlaten nooit uw apparaat.

Welke CSS-functies worden ondersteund?

Standaard CSS, inclusief lay-outs, kleuren, lettertypen, achtergronden, randen en tabellen, wordt goed ondersteund. Geavanceerde functies zoals CSS Grid, complexe animaties en sommige Flexbox-randgevallen kunnen beperkt zijn.