How to convert HTML / web pages to PDF
Saving a web page as PDF sounds trivial — your browser already has a print dialog. The reality is messier: most pages weren't designed for paper, so the default print output includes the navigation bar, the cookie banner and a third of the article cut off in the sidebar. There are four good ways to get a clean PDF from a web page, and the right pick depends on whether you want the article alone, the whole layout, or a developer-grade screenshot.
- Browser Print → Save as PDF (quick & dirty). Ctrl+P / Cmd+P → Destination: Save as PDF. Most browsers offer a "More settings" toggle where you can disable headers/footers and turn off background graphics. Good enough for a personal archive of a long-form article.
- Reader mode first, then print. In Firefox, Safari and Edge, click the Reader View icon in the address bar before printing. The page strips ads, sidebars and navigation, leaving you with a clean text article. Print that to PDF — the result looks like a magazine page.
- Use a print-friendly extension. Print Friendly & PDF, PrintWhatYouLike and similar extensions let you click-to-remove individual elements before saving. Useful for pages with tricky layouts where reader mode strips too much.
- Headless Chrome / Puppeteer (developers). On the command line: "chrome --headless --print-to-pdf=output.pdf https://example.com". Puppeteer or Playwright give the same result with control over page size, margins and CSS print rules. The most reliable option for batch jobs and CI.
Your files stay on your device
All processing happens locally in your browser using JavaScript. We never upload, store or look at your files.
Real cases for HTML to PDF
Archiving a long-form article
Reader mode → Print to PDF. The result is a clean, readable file you can keep offline; ads and navigation are stripped, font size and line spacing are pleasant to read.
Saving documentation for offline reference
Many docs sites have a "PDF" button that exports the whole tree. If not, use a print-friendly extension to clean up before saving each page, or use a doc-build tool that has PDF as a target.
Generating invoices from your web app
Server-side: render the invoice as HTML, send to headless Chrome, get back a PDF. The advantage is you can style it with CSS — the same templates you use on screen.
Capturing a confirmation page
Booking confirmations and order receipts often vanish from the order-history page after a few months. Save as PDF the moment you receive them; reader mode keeps the order details, the date and the reference number, dropping the upsell banners.
HTML-to-PDF problems
Background colours and images are missing
Browser print dialogs default to ink-saving mode. Toggle "Background graphics" / "Print backgrounds" in More Settings. The PDF will then match what you see on screen.
Page breaks split in awkward places
Web pages don't have fixed page heights. If you control the HTML, add CSS rules: "page-break-inside: avoid" on cards, "page-break-after: always" before sections. Headless Chrome respects these; the print dialog mostly does too.
Cookie banners and pop-ups land in the PDF
Dismiss them before printing. Reader mode bypasses them entirely. For automated capture, headless Chrome with a small wait + click selector before printing avoids them.
Fonts in the PDF don't match the site
Web fonts may not load in time during print. Wait until the page is fully rendered (you can see the right font on screen) before pressing Print. For headless Chrome, use --no-sandbox and add a 1-2 second delay before --print-to-pdf.
Images don't appear in the PDF
Lazy-loaded images may not load until you scroll. Scroll to the bottom of the page first, wait for images to fill in, then print. Headless tools have flags like "--full-page" that handle this automatically.