To convert HTML to PDF, paste your HTML code into the editor, check the live preview, choose A4 or US Letter page size, then click Convert to PDF — the file downloads directly to your device, with no upload to any server.
Free HTML to PDF Tool — runs in your browser
No uploads. No account. Your HTML and output file never leave your device.
Convert HTML to PDF nowWhen do you need to convert HTML to PDF?
HTML is how the web is built, but many workflows still require a PDF: a static, self-contained file that looks the same everywhere it opens. The gap between "I have HTML" and "I need a PDF" comes up in several distinct situations:
- Generating invoices and receipts — developers who build web apps often generate invoices as HTML templates and need to produce a PDF version for the customer without setting up a headless browser or a server-side PDF library
- Saving HTML email templates — HTML email code can be converted to a PDF preview for client approval, or for archiving the final version of a campaign
- Creating printable reports from web data — a table of data styled in HTML can be converted to a formatted PDF report without needing Word or Excel
- Archiving web content — saving a page's HTML source and converting it to PDF creates a static, server-independent archive of the content
- Prototyping PDF layouts — HTML and CSS are faster to write and iterate than native PDF authoring tools; converting a working HTML layout to PDF is quicker than learning a PDF-specific design application
- Producing print-ready documents without Word — a well-styled HTML document (letter, proposal, CV) can produce a clean PDF without the font and layout inconsistencies of browser-printed Word files
The problem with most online HTML-to-PDF tools
Most online HTML-to-PDF converters operate server-side. You paste or upload HTML, it is sent to their server, rendered using a headless browser (usually Puppeteer/Chromium), and the PDF is returned. This works well technically, but it means the HTML content — which may contain invoice data, customer information, proprietary templates, or confidential business reports — is transmitted to and processed on a third-party server.
Many services also have request quotas, file size limits, or require account creation for repeated use. The tool becomes a bottleneck when you need to convert documents routinely.
FixMyPDF converts HTML to PDF entirely in your browser using html2canvas (to render the HTML as a canvas image) and pdf-lib (to embed that image into a PDF document). The HTML you paste and the PDF that results are processed and stored only in your browser's memory. Nothing is transmitted. There are no quotas and no account required.
How to convert HTML to PDF step by step
-
1
Open the HTML to PDF tool
Go to fixmypdf.tech/tools/html-to-pdf.html. No sign-up required. -
2
Enter your HTML
Paste your HTML code into the monospace editor, or click one of the four quick-start template buttons — Invoice, Report, Letter, or Data Table — to load a pre-styled example you can edit directly. -
3
Check the live preview
The preview panel on the right updates as you type, showing exactly how the HTML renders. Confirm the layout looks correct before converting. On mobile, tap the Preview button to reveal the rendered output. -
4
Choose a page size
Select A4 (210 × 297 mm, the default) or US Letter (8.5 × 11 in) using the radio buttons below the editor. -
5
Click Convert to PDF and download
Press Convert to PDF. The tool renders your HTML in a hidden viewport, captures it as a high-quality image, and embeds it into a PDF. The file downloads immediately. Your HTML is not stored anywhere.
Using the quick-start templates
Four pre-built templates let you go from zero to a formatted PDF in under a minute. Each template uses only system fonts and inline CSS, so it converts cleanly without modification. Click a template button to load it into the editor, then edit the placeholder text before converting.
| Template | What it includes | Edit to customise |
|---|---|---|
| Invoice | Company header, client billing block, line-item table with totals, payment note | Company name, address, invoice number, date, client info, line items, amounts, payment terms |
| Report | Title, author/date meta line, heading hierarchy, body text, callout quote block | Report title, author name, date, section headings, body paragraphs |
| Letter | Sender and recipient address blocks, date, formal salutation and closing, signature line | Sender/recipient names and addresses, date, body text, signatory name |
| Data Table | Styled HTML table with header row, alternating row shading, and a totals row | Column headers, row data, caption text, totals |
If there is already HTML in the editor when you click a template button, the tool shows a confirmation prompt — Replace your HTML? — before overwriting. Click Use Template to proceed or Cancel to keep your current content.
What HTML and CSS works — and what doesn’t
The tool renders HTML using html2canvas in a fixed 900-pixel-wide viewport and captures the result as a high-resolution image. This means what you see in the live preview is approximately what you get — but a few categories of HTML and CSS have important limitations.
| Feature | Support | Notes |
|---|---|---|
Inline style="…" attributes |
Works | Always renders correctly — the safest CSS approach |
<style> block in <head> |
Works | Full CSS rule support; use this for typography, layout, and table styles |
| System fonts (Arial, Georgia, Courier, etc.) | Works | Loaded from the OS — reliable and consistent across conversions |
| Tables, lists, headings, images (inline) | Works | All standard HTML elements render as expected |
| Inline images as data URIs | Works | Use src="data:image/png;base64,…" to embed images that always render |
| Flexbox and CSS Grid layouts | Mostly | Renders via html2canvas; avoid viewport-relative units (vw, vh) |
| External images (URLs) | Sometimes | Requires CORS headers on the image server; not guaranteed for all external sources |
Google Fonts / @font-face from CDN |
No | Async font loading is not completed before conversion; use system fonts instead |
| JavaScript in the HTML | No | Scripts do not execute during conversion; CSS-only layouts are required |
| CSS animations and transitions | No | Static snapshot only; animations capture the initial state |
@page CSS rules |
No | Not recognised by html2canvas; use the tool's page size selector instead |
The clearest design rule: write your HTML as if JavaScript does not exist and fonts must come from the operating system. Documents that follow this rule convert with no surprises.
Tips for cleaner HTML-to-PDF output
Use a fixed page width in your CSS
The conversion viewport is 900 pixels wide. Set a fixed max-width on your document body — typically 700–760px — and centre it with margin: 0 auto. This mirrors the content area of an A4 page at screen resolution and prevents text from running too wide in the PDF.
Use generous padding on the body
Add padding: 40px 50px or similar to the body element. This creates printed-page margins inside the PDF. Without padding, text runs right to the edge of the page, which is fine on screen but looks unprofessional in a document PDF.
Use system fonts explicitly
Rather than relying on font inheritance, declare your font stack explicitly: font-family: Arial, Helvetica, sans-serif for a clean modern look, or font-family: Georgia, 'Times New Roman', serif for a formal document tone. Explicitly declared system fonts render correctly every time; omitting the declaration can sometimes default to a font that html2canvas handles inconsistently.
Embed images as data URIs for guaranteed rendering
External image URLs require a CORS-permitted request during conversion, which may fail or produce blank image areas. For logos or any image critical to the layout, convert the image to a Base64 data URI and use it as the src attribute. The FixMyPDF PDF to Base64 tool works with PDFs; for images, any online Base64 encoder can convert a PNG or JPG to a data URI string.
Check the live preview before converting
The live preview renders your HTML in real time in the same browser engine used for conversion. It is the most accurate predictor of the output. If something looks wrong in the preview — a table overflowing, text too small, an image missing — fix it in the editor before clicking Convert.