How HTML-to-PDF Rendering Works
Browser-based HTML-to-PDF conversion uses the browser's own rendering engine (the same one that draws web pages) to lay out the HTML, then captures the result as a PDF. This means CSS, web fonts, and responsive layouts all work — because the browser already knows how to render them.
CSS @media print
Browsers apply @media print styles when rendering to print/PDF. Use this to hide navigation, ensure black text, and control page breaks:
@media print {
nav, aside { display: none; }
body { color: #000; background: #fff; }
tr { page-break-inside: avoid; }
}
Controlling Page Breaks
CSS page-break properties control where content splits across PDF pages:
/* Force a new page before this element */
.chapter-start { page-break-before: always; }
/* Prevent splitting across pages */
.invoice-row { page-break-inside: avoid; }
/* Keep heading with the content that follows */
h2 { page-break-after: avoid; }
Common Use Cases
- Invoice generation — HTML templates rendered to PDF on demand
- Reports and dashboards — capture a data visualization page as a PDF snapshot
- Documentation — export a web-based doc site to PDF for offline distribution
- Email newsletters — archive an HTML email as a PDF
Limitations
JavaScript-rendered content (React, Vue, Angular) may not be fully captured if the renderer doesn't execute JS. For SPAs, use a headless Chrome solution (Puppeteer) server-side, or ensure the content is server-rendered before conversion.
Convert HTML to PDF
Paste your HTML into ToolsVito's HTML to PDF and download the rendered document — the browser renders and captures it locally.