1. Afbeeldingen ontbreken of zijn kapot
Als je PDF exporteert met ontbrekende afbeeldingen, komt dat meestal omdat de afbeeldingen relatieve paden gebruiken (bijv., src="/images/logo.png") of geblokkeerd worden door browser-beveiligingsbeleid.
De Fix: Gebruik absolute URL's (bijv., src="https://example.com/images/logo.png") of embed afbeeldingen direct als Base64 data URI's.
2. CSS-styles worden niet toegepast
Soms ziet je HTML-preview er geweldig uit, maar de PDF-output is volledig ongestylde tekst.
De Fix: De converter heeft mogelijk moeite met het laden van externe stylesheets. Probeer je CSS te verplaatsen naar een inline <style> -blok in de head van je document, of gebruik inline style="..." -attributen op individuele elementen.
3. Ongelukkige pagina-einden
Standaard zullen HTML-converters je document strikt op basis van paginahoogte hakken, wat tabellen, afbeeldingen of alinea's onhandig over twee pagina's kan splitsen.
De Fix: Gebruik CSS print-eigenschappen om pagina-einden expliciet te beheren:
.no-break {
page-break-inside: avoid;
}
.force-break-before {
page-break-before: always;
}Pas de .no-break -klasse toe op tabellen of afbeeldingscontainers om te voorkomen dat ze in tweeën worden gesneden.
4. De layout is te breed
Webpagina's zijn ontworpen om brede horizontale schermen te vullen, terwijl standaard PDF's (zoals A4 of US Letter) lang en smal zijn.
De Fix: Zorg dat je HTML-container een maximale breedte heeft ingesteld. We raden aan een max-width wrapper van rond 680px te forceren om een standaard afgedrukte paginabreedte te simuleren.
Heb je nog steeds problemen?
Probeer je code te plakken in onze HTML to PDF converter. Het vertrouwt op een high-fidelity rendering engine die veel van deze edge cases automatisch afhandelt.