HTML to PDF Converter — Free Online Tool
Convert HTML code to PDF documents directly in your browser. No server uploads, no sign-ups. 100% client-side — your data stays private.
How do you convert HTML to PDF? A browser-based converter renders your markup in a sandboxed frame, captures the rendered result as a bitmap, and writes that bitmap onto PDF pages. This tool captures the preview with html2canvas and assembles the file with pdf-lib, producing A4 pages of 595.28 × 841.89 points with 40-point margins. The PDF matches the preview pixel for pixel, but its text is an image rather than selectable characters.
How to Convert HTML to PDF
-
Paste your HTML — Drop a complete document into the editor, including its
<style>block. Click Load Sample to start from a working template with headings, a table and inline CSS. -
Check the live preview — The right panel renders your markup in an isolated
iframe. Whatever appears there is exactly what gets captured, so fix spacing and overflow before you convert. -
Inline your assets — Swap external image URLs for
data:URIs and external stylesheets for inline rules. Cross-origin files are frequently blocked at capture time and come out blank. - Convert to PDF — Click Convert to PDF. The progress bar tracks library loading, rendering, capture and page assembly; a tall document is sliced across as many A4 pages as it needs.
-
Save and proof the file — The document downloads as
html-document.pdf. Open it and check the page joins — the split is geometric, so it can land mid-paragraph.
How HTML to PDF Conversion Works
There are two families of HTML-to-PDF conversion, and they behave very differently. A paged layout engine — the kind sitting behind your browser's own print dialog — re-flows the document into paged media and writes real text objects into the file, so the result stays selectable and searchable. A rasteriser instead photographs the rendered page and drops that photograph onto a PDF canvas. This tool is a rasteriser, and that single fact explains almost every question people have about the output.
The pipeline runs in four stages. Your markup is first wrapped in a Blob and
loaded into the preview iframe through an object URL, so it renders with the same
engine and the same CSS support as any other page in your browser — flexbox, grid,
custom properties, transforms and media queries all behave normally. Next,
html2canvas walks the rendered DOM inside that frame, reads the computed style
of every node, and repaints an approximation of it onto an HTML <canvas>.
The canvas is then exported with toDataURL('image/png') and decoded to raw bytes.
Finally pdf-lib embeds that PNG and lays it across however many pages the
capture needs.
Pagination here is arithmetic rather than layout. The capture is scaled so its width matches the usable page width, and the resulting scaled height is divided by the usable page height to get a page count. Each page then draws the same embedded image with a clipping rectangle offset progressively further down:
pages = ceil((captureHeight × usableWidth / captureWidth) / usableHeight)Because the split is purely geometric, it has no idea where your paragraphs, table rows or headings begin and end. A break can land halfway through a line of text. If a join falls somewhere awkward, add padding or an empty spacer element in your HTML to push the following content past the boundary, then convert again.
Page Geometry
| Property | Value |
|---|---|
| Page size | A4 — 595.28 × 841.89 pt (210 × 297 mm) |
| Margin | 40 pt on all four sides (about 14 mm) |
| Usable width | 515.28 pt |
| Usable height | 761.89 pt per page |
| Embedded image | PNG, lossless |
| Multi-page handling | One capture, clipped and redrawn on successive pages |
What Survives the Capture
Rasterising is faithful to appearance and lossy about structure. This table sets expectations before you convert something important.
| Feature | Result in the PDF |
|---|---|
Inline styles and <style> blocks | Rendered as shown in the preview |
| Flexbox, CSS Grid, transforms | Rendered — the browser lays them out first |
Base64 data: images | Always rendered, no network needed |
| Cross-origin images and fonts | Often blank or substituted; subject to CORS |
| Selectable, searchable text | Not preserved — the page is a picture |
| Clickable links, bookmarks, form fields | Not preserved |
CSS @page rules | Ignored; page size and margins are fixed |
Need text you can select, search or copy? Use your browser's own Print → Save as PDF, or start from a text source instead: Markdown to PDF and Text to PDF both write real text objects into the file rather than a bitmap.
Frequently Asked Questions
It performs the job a browser normally reserves for printing: turn a live, reflowable document into fixed-size pages. This converter renders your markup in an isolated frame so the browser resolves all the CSS, captures the rendered result to a canvas, and writes that capture onto A4 pages with pdf-lib. The PDF is therefore a faithful picture of the preview rather than a re-typeset version of it.
Your markup and the finished PDF never leave the machine — rendering, capture and file assembly all happen in the page you are looking at. The two libraries that do the work, html2canvas and pdf-lib, are fetched from a public CDN the first time you convert, so that request is visible to your network, but it carries no content of yours. Nothing is stored after you close the tab.
External stylesheets usually apply, because the browser loads them before the capture runs. External images are less reliable: if the host does not send permissive CORS headers, the canvas becomes tainted or the image is skipped, and you get a blank rectangle. Convert important images to base64 data: URIs and paste the CSS inline, and the result becomes deterministic.
Every page is A4 — 595.28 by 841.89 points — with a 40-point margin on each side, leaving 515.28 by 761.89 points of usable area. That geometry is fixed by the converter, so page-level CSS at-rules in your HTML are ignored. To change the effective trim, set an explicit pixel width on the body and let the capture scale to fit, or use a tool that exposes a page-size setting directly.
No. The converter photographs your rendered page and embeds it as a PNG, so the PDF contains one image per page rather than text objects. You cannot select, copy, search or reflow the words, and a screen reader will find nothing to read. When those properties matter, print the page from your browser or build the document from a text source instead.
Larger than a text-based PDF of the same content, because the whole page is stored as a lossless PNG. A dense page of prose that would be a few kilobytes as text can land in the hundreds of kilobytes as an image, and photographs or gradients push it higher still. Trimming unnecessary background imagery is the fastest way to shrink the result.
Use the browser's print dialog when you need real text, working links, or control over paper size and headers. Use this tool when you want the exact on-screen rendering with no print stylesheet interference, when you are converting a fragment rather than a live page, or when you want a repeatable result from pasted markup without leaving the editor.
Three causes cover most cases. Images or fonts on another domain were blocked and rendered as gaps. Content appeared after the capture ran — anything drawn by a delayed script, a fetch call or an animation may not exist yet when the snapshot is taken. Or the document was taller than the capture and a section fell outside it. Inline your assets, remove entrance animations, and convert again.
Use Cases
Invoice Template Proofing
A developer building an HTML invoice template converts a filled sample to PDF to see where the line-item table breaks across pages before wiring the template into the billing system.
Email Campaign Archive
A marketer pastes the compiled HTML of a newsletter and saves a PDF for the campaign approval folder, preserving the exact rendering that subscribers received.
Certificates and Badges
A course administrator lays out a completion certificate in HTML and CSS, then exports a print-ready PDF per cohort without opening a design application.
Design Handoff Snapshots
A front-end developer sends a stakeholder who cannot run the dev server a PDF of a component in a specific state, so review comments reference a fixed rendering.
Report Snapshots for Meetings
An analyst pastes the styled HTML table behind a dashboard panel and drops the resulting PDF into a board pack, keeping the conditional formatting intact.