Turn HTML into a PDF, locally
Sometimes you just need a quick PDF of an HTML email, an invoice template, or a snippet of formatted content — without installing anything or trusting an upload service. This tool renders your pasted HTML in a sandboxed iframe and then uses the browser’s own print-to-PDF engine to save it. The rendering and the PDF generation both happen on your machine.
How it works
Your HTML is written into an iframe that has the sandbox attribute set
(scripts disabled, no navigation), so even untrusted markup renders safely. A
small print-friendly base stylesheet is injected so text wraps sensibly and
default margins are reasonable. When you click Save as PDF, the tool calls
window.print() scoped to the preview frame; your browser opens its native print
dialog where you select “Save as PDF” as the destination. The browser’s layout
engine — the same one that draws web pages — produces the PDF, so the output
matches the preview.
What works well and what does not
| Works | Does not work |
|---|---|
Inline styles and <style> blocks | External stylesheets without absolute URLs |
Absolute https:// image URLs | Relative image paths |
| Web-safe fonts | Custom fonts loaded via external @font-face |
| Tables, lists, headings | JavaScript-dependent content (scripts are sandboxed off) |
@media print CSS rules | Dynamic content that requires JS to render |
Preparing good HTML for PDF export
Keep your markup self-contained. All styles must live in a <style> block inside the <head>, or as inline style attributes. The content renders without a domain context, so relative URLs (/images/logo.png) will not resolve — switch to absolute ones (https://example.com/images/logo.png).
For print-specific layout, use CSS @media print rules:
<style>
@media print {
.no-print { display: none; }
h1 { page-break-before: always; }
table { page-break-inside: avoid; }
}
</style>The page-break-inside: avoid declaration is especially useful for tables and figures — it keeps them from splitting across pages.
Controlling page size and margins
Page size, margins, and browser headers/footers are set in the print dialog that opens when you click Save as PDF. For Chrome: choose “More settings” to adjust paper size, orientation, and margins. To hide the browser’s URL and date stamps, set Margins to “None” or use a custom value. These controls live outside the HTML, so adjust them there rather than trying to override them with CSS.
Tips
- Use absolute
https://URLs for images so they resolve when the content is rendered on its own. - Put all styling inline or in a
<style>block; external stylesheet links may not load because the content has no base URL. - For repeatable, pixel-precise PDFs (for example invoices that must look the same every run), consider a server-side tool like Puppeteer or a headless Chrome workflow instead of the browser dialog.
- This tool is ideal for one-off conversions and prototyping. Nothing is uploaded — your content never leaves the browser.