HTML to PDF Converter
Paste your HTML (with its CSS) or open an .html file. The live preview shows how it lays out on the page, including page breaks, and one click saves it as a PDF.
How to use the HTML to PDF Converter
- Paste your HTML into the editor, or click Open .html to load a file. Use Sample to try it out.
- Pick the page size, orientation and margins.
- Check the preview: dashed lines show where each new PDF page starts.
- Press Download PDF to save the file, or Print to use your browser's print dialog.
Page width in pixels for common paper sizes
Browsers lay out HTML at 96 CSS pixels per inch, so the width your content gets is (paper width − 2 × margin) in mm × 96 ÷ 25.4. Example: A4 with 15 mm margins gives (210 − 30) × 3.7795 = 680 px of usable width and (297 − 30) × 3.7795 = 1009 px of height per page.
| Paper (portrait) | Size | Full width | Content width, 10 mm margins | Content width, 15 mm margins | Content height, 15 mm margins |
|---|---|---|---|---|---|
| A4 | 210 × 297 mm | 794 px | 718 px | 680 px | 1009 px |
| US Letter | 8.5 × 11 in | 816 px | 740 px | 703 px | 943 px |
| Legal | 8.5 × 14 in | 816 px | 740 px | 703 px | 1231 px |
The preview uses exactly these sizes, so the dashed page-break lines match the PDF.
CSS that works well for PDF output
| Goal | CSS |
|---|---|
| Start a section on a new page | page-break-before: always; or break-before: page; |
| Keep a box together | page-break-inside: avoid; |
| Readable body text | font-size: 12pt; line-height: 1.5; |
| Images that never overflow | img { max-width: 100%; height: auto; } |
| Full-width tables | table { width: 100%; border-collapse: collapse; } |
| Colored backgrounds | Work as written: the PDF is a snapshot of the rendered page |
What is kept and what is removed
Your HTML is cleaned before it is shown, so pasted code can never run on this page:
- Kept: all normal HTML elements, inline
styleattributes,<style>blocks, classes, tables, lists, SVG and images (includingdata:images). - Removed:
<script>, event handlers such asonclickoronerror,javascript:links, iframes, embeds, forms and<link>or@importstylesheets. - External resources: CSS
url()references to other sites are dropped and remote images only load if the server allows cross-origin use.
Frequently asked questions
Is my HTML uploaded to a server?
No. The page is sanitized, laid out and turned into a PDF by html2pdf.js inside your browser, so your code never leaves your device.
Why were my scripts removed?
Running unknown JavaScript on this page would be a security risk, so the code is cleaned with DOMPurify before it is shown. Scripts, event handlers such as onclick, iframes, forms and external stylesheets are removed. Static HTML and CSS stay exactly as written.
Is the text in the PDF selectable?
html2pdf.js takes a high-resolution snapshot of each page, so the PDF looks exactly like the preview, but the text is part of the image and cannot be selected or searched. Use the Print button and choose Save as PDF if you need selectable text.
Why don't my external images appear?
Images on other websites only show up if that server allows cross-origin access. For reliable results, use images on the same site as the code, or embed them as data: URLs.
How do I force a page break?
Add style="page-break-before: always" (or break-before: page) to the element that should start on a new page. The converter also avoids cutting through images where it can.
What page width does the HTML get?
The content area equals the paper width minus the margins. On A4 with 15 mm margins that is 180 mm, or about 680 CSS pixels, so design for roughly that width.