HTML to PDF — save web pages as printable documents

Five free ways to save a web page as a PDF, with gotchas (cookie banners, lazy-load, login).

11 min read

HTML to PDF — save web pages as printable documents (2026)

By ScoutMyTool Editorial Team · Last updated: 2026-05-19

Introduction

I was trying to save a confirmation receipt from my airline last week and ended up with a four-page PDF that was 80 percent navigation menus, an enormous cookie banner covering the actual confirmation number, and a misaligned chart that pretended to be a barcode. The same page in Reader Mode and the same Print-to-PDF flow produced a clean two-page record. The difference was one menu choice that I had been ignoring for years. This article is the practical version of how to save web pages as PDFs in 2026 — the four free methods, the specific gotchas that make most attempts come out badly the first time, and how to handle the awkward cases (login, lazy-load, paywall).

Five ways to save a web page as PDF

MethodWorks onHandles login?Best for
1. Browser Print → Save as PDFAny page you can view in the browser (Chrome, Edge, Firefox, Safari)Yes — you are already logged inQuick one-off save of a page you are currently looking at
2. Reader Mode → Print → Save as PDFArticle-style pages with a readable main column (Firefox, Safari, Edge)Yes — Reader Mode runs over the logged-in pageArticles where you want to strip ads, nav, and sidebars before saving
3. ScoutMyTool HTML to PDF (paste HTML or upload .html)Any HTML you can paste; runs entirely in the browserN/A — operates on the HTML, not the live URLLocal .html files, emails saved as HTML, generated HTML output
4. iOS / Android "Save as PDF" sharingAny page you can open in mobile Safari or ChromeYesSaving a page from your phone for offline reading or forwarding
5. Browser headless (devtools / extension)Any page; better at full-page captures past the viewportYes — runs as the logged-in browser sessionPower users who need consistent full-page captures of long-scrolling pages

Method 1 — Browser Print → Save as PDF

The least-known fact about web browsers is that all of them have had a PDF exporter built in for over a decade. Chrome, Edge, Firefox, Safari, and Opera all expose it through the standard Print dialog: Ctrl+P (Windows/Linux) or Cmd+P (macOS), then change the destination to "Save as PDF". The browser uses its own rendering engine and any CSS print stylesheets the page authors supplied to generate the output. This is the simplest, most reliable, and most private method — nothing leaves your machine.

Two settings to know: "Background graphics" controls whether coloured backgrounds and CSS-painted images appear in the PDF (off by default, on the More Settings panel); "Headers and footers" controls whether the browser stamps the URL and date at the top and bottom of each PDF page (on by default, useful for archival, less useful for sharing). Margins, scale, and paper size are also configurable.

Method 2 — Reader Mode + Print = a clean PDF

Most "the PDF has too much junk" problems disappear if you turn on Reader Mode before printing. Reader Mode is a feature in Firefox, Safari, and Microsoft Edge that extracts the main article content from the page and re-renders it in a clean typography-focused layout — no navigation, no sidebars, no ads, no comment thread, no cookie banner. The resulting print snapshot is short, legible, and looks like a magazine article rather than a website. Enable Reader Mode (look for the article-icon in the address bar or use the keyboard shortcut), adjust the font and theme if you want, then print to PDF as usual.

Reader Mode works best on article-style pages with a clear main column — news articles, blog posts, documentation, recipes. It is unreliable on dashboard-style pages with multiple equally-important sections, on application UIs, and on pages that hide content behind dynamic toggles. For those, fall back to Method 1 or Method 5.

Method 3 — Paste HTML directly with ScoutMyTool

Some HTML-to-PDF jobs do not start with a URL. You may have HTML pasted into an email body, downloaded as a .html file, generated by a script, or extracted from an archive. For those, ScoutMyTool's HTML to PDF tool accepts raw HTML as input — paste it into the textarea or drop in an .html file. The tool runs entirely in your browser tab using pdf-lib and a CSS layout engine; nothing is uploaded. The output is a PDF that renders the HTML as a paginated document, with sensible defaults for page size, margins, and font handling.

For Markdown-source documents, Markdown to PDF is the right tool — it accepts CommonMark and GitHub-flavoured Markdown and produces a clean styled PDF without the intermediate "render to HTML then print" step. Good for README files, documentation, and engineer-authored content.

Method 4 — Saving from iPhone and Android

iOS Safari has the same Save-to-PDF flow as desktop Safari: tap the share button, then in the share sheet pick "Markup" or "Save to Files" with "Save as PDF" pre- selected — the page becomes a PDF on the device. iOS also has a hidden "Full Page" option in the Screenshot edit mode: take a screenshot of the page (press the side button + volume up briefly), open the screenshot, switch from "Screen" to "Full Page" at the top, then save as PDF.

Android Chrome exposes the same path via Share → Print → Save as PDF, with similar background-graphics and orientation options. Both platforms preserve the same functionality as their desktop equivalents because the underlying rendering engines are shared.

Six common gotchas and their fixes

ProblemRoot causeFix
Background colours and images missing from the PDFBrowser print stylesheets disable background printing by default to save toner.In the Print dialog, tick "More settings" → "Background graphics" (Chrome) or "Print backgrounds" (Firefox/Safari). The PDF will then preserve coloured banners and images intact.
Cookie banner or modal blocks the actual contentThe cookie consent overlay is part of the rendered page; the print process captures whatever is visible.Dismiss the banner first (accept or reject, whichever the page allows). For sites that re-display it, use Reader Mode (which strips overlays) or save with a content blocker active.
Page is cut off at the bottom even though it scrolls further on screenLazy-loaded content (images, comments, infinite scroll) only loads as you scroll near it. The print process captures what is currently in the DOM, which is just the top section.Scroll all the way to the bottom of the page before printing — this triggers lazy-loaders to fetch and render the full content. Then print.
Long page splits a paragraph awkwardly across two PDF pagesNo CSS page-break rules in the source HTML; the browser breaks wherever the page ends.No fix for one-off saves. For your own HTML you control, add CSS "page-break-inside: avoid" (or "break-inside: avoid" in modern CSS) on blocks that should stay together.
Interactive widgets (maps, charts, embeds) become blank rectanglesJavaScript-driven widgets render in the browser, not in print stylesheets. The print snapshot captures the static fallback if any, or nothing.Take a screenshot of the widget separately and insert into the PDF post-hoc, or use a tool with full-page screenshot mode that captures the rendered output rather than the source DOM.
The PDF has every navigation menu, sidebar, and ad slot visibleThe page is saved as-rendered; the screen view includes all chrome.Use Reader Mode in Firefox, Safari, or Edge before printing. Reader Mode keeps just the article content and discards everything else. The resulting PDF is much shorter and cleaner.

For HTML you control: the CSS Paged Media rules to know

If you are authoring HTML that will frequently be saved as PDF (invoices, reports, generated documents), the CSS Paged Media specification gives you targeted control over how the page breaks fall.1

  • page-break-before: always (or modern break-before: page) — force a new page before an element. Useful between chapters.
  • page-break-after: avoid — keep the next element on the same page as this one. Useful for headings that should not be orphaned.
  • page-break-inside: avoid (modern break-inside: avoid) — keep a block on a single page. Useful for tables and figure-caption pairs.
  • @media print {...} — entirely separate stylesheet for printed output. Hide nav bars, remove ad slots, increase font size, change colour scheme to print-friendly.
  • @page { size: A4; margin: 2cm; } — declare the target paper size and margins explicitly. The browser uses these when no other size has been picked by the user.

A well-designed print stylesheet is what makes the same web page produce a beautiful PDF when printed without manual tweaking. The W3C documents the full module under CSS Fragmentation Module Level 3 and CSS Paged Media Module Level 3.2

Frequently asked questions

What is the easiest way to save a web page as a PDF on a desktop browser?
Press Ctrl+P (Windows/Linux) or Cmd+P (macOS) to open the print dialog, then change the destination to "Save as PDF". This works identically in Chrome, Edge, Firefox, and Safari and produces a clean PDF copy of whatever the browser would print. The only setting most users want to change from defaults is "Background graphics" — turn it on if the page has coloured banners or themed backgrounds, because the default for the print pipeline is to disable them.
How do I save just the article content, without ads and navigation?
Use Reader Mode. In Firefox: Address bar → Reader View button (or F9). In Safari: View → Show Reader, or click the AA icon in the address bar. In Edge: Immersive Reader from the address bar. In Chrome: enable the experimental "Reading Mode" in side panel or use a Reader-style extension. Once in Reader Mode, press Ctrl/Cmd+P → Save as PDF. The resulting file contains only the main article — no header, no sidebar, no ads, no comments, no footer.
Can I save a long-scrolling page as a single PDF with all the content?
Yes, but you have to scroll first. Lazy-loaded content (images below the fold, infinite-scroll comment threads, social media timelines) only loads as you scroll near it. Before pressing print, scroll all the way to the bottom of the page — wait a few seconds for everything to load — then scroll back to the top. Now the entire page is in the DOM and the print snapshot captures the full length. For pages with truly endless infinite scroll (a Twitter feed, for example), this approach has a practical limit.
Can I save a page that requires login?
Yes, as long as you are logged in in the browser doing the saving. The print pipeline operates on the rendered page as the current user sees it — your session cookies are respected. This is the right path for saving receipts from your bank, order confirmations from a retailer, or any page behind authentication. Server-based "URL to PDF" services that fetch the URL from their infrastructure cannot see behind login because they do not have your session — they will receive the public version of the page or a login redirect.
Are my pages uploaded anywhere when I use a free HTML-to-PDF tool?
It depends on the tool. Browser print-to-PDF is entirely local — the browser renders the page, writes the PDF, and saves it to your downloads folder. ScoutMyTool's HTML-to-PDF tool also runs entirely in your browser tab using pdf-lib and a layout engine — no upload. Server-side "URL to PDF" services (PDFShift, DocRaptor, the older "Print Friendly" sites) fetch the URL from their servers, which means (a) they cannot see logged-in content and (b) the rendered page passes through their infrastructure. For sensitive pages, stick to browser-local methods.
How do I preserve clickable links in the saved PDF?
Most browser print-to-PDF flows preserve hyperlinks automatically — anchor tags become PDF link annotations. The exceptions: Safari historically dropped link annotations in some versions (fixed in 16.4+), and some older mobile browsers flatten the page during print. To verify, open the saved PDF and hover over a link — if the cursor turns into a hand and the URL is visible in the status bar, the link survived. If not, re-export from a different browser, or use ScoutMyTool's HTML-to-PDF tool which explicitly preserves link annotations from anchor tags.
How do I control where the PDF breaks pages?
If you control the source HTML, the CSS Paged Media specification gives you page-break controls: "page-break-before: always" forces a new page before an element; "page-break-after: avoid" prevents a break right after; "page-break-inside: avoid" keeps a block on one page. The newer CSS Fragmentation module uses "break-before / break-after / break-inside" with the same semantics. For pages you do not control, there is no good way to influence the breaks — the browser places them wherever physical page boundaries fall.

Convert HTML to PDF, free

Paste HTML or drop an .html file. Browser-only — nothing is uploaded.

Open the free HTML to PDF tool →

References

  1. World Wide Web Consortium, CSS Paged Media Module Level 3 (Editor's Draft). w3.org/TR/css-page-3 (accessed May 2026). Defines @page rules, page boxes, page margins, and named pages.
  2. World Wide Web Consortium, CSS Fragmentation Module Level 3. w3.org/TR/css-break-3 (accessed May 2026). Defines the modern break-before / break-after / break-inside properties for paged media.
  3. ISO 32000-1:2008, Document management — Portable document format — Part 1: PDF 1.7. Public reference copy: opensource.adobe.com/dc-acrobat-sdk-docs/pdfstandards/PDF32000_2008.pdf. Annotation types for clickable links (§12.5.6); page tree and orientation (§7.7).