How to Save a Web Page as a PDF (and Make It Look Good)

Saving a web page as a PDF is handy for keeping a purchase receipt, a recipe, an article to read offline, or proof of what a page said on a given date. The trouble is the result often has broken menus, cookie banners and half the content cut off.

Here are three ways to do it, depending on what you need.

Option 1: from your browser (fastest)

Every browser can "print" to PDF:

  1. Open the page and press Ctrl + P (Cmd + P on Mac).
  2. Under Destination, choose Save as PDF.
  3. In More settings:
    • Turn on Background graphics to keep colors and backgrounds.
    • Turn off Headers and footers to remove the URL and date from the margins.
    • Adjust Scale if content spills off the right edge.
  4. Click Save.

Perfect for receipts and articles. The weak spot: many sites have poor print styles or hide content when printing.

Tip: if your browser has Reader mode (Firefox, Safari, Edge), switch it on before printing. It strips menus and ads and leaves just the text and images.

Option 2: convert an HTML file to PDF

If you're a developer or designer, or you generate reports and invoices as HTML, converting the file directly is the easiest route:

  1. Save the page as .html (with styles embedded, if possible).
  2. Upload it to the HTML to PDF converter.
  3. Download the PDF.

The converter handles CSS: inline styles, <style> tags and external stylesheets. Two things to keep in mind:

  • JavaScript isn't executed. If content is generated by JS (charts, tables loaded later), first save the final HTML from your browser (Save As > Webpage, Complete) and convert that file.
  • One page at a time. For a whole site, convert each page separately.

Option 3: make the PDF look great (if you own the site)

If you control the HTML, a few print CSS rules make a big difference:

@media print {
  nav, footer, .cookie-banner, .ads { display: none; }
  body { font-size: 12pt; }
  table, img, figure { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
}

@page { size: A4; margin: 2cm; }
  • display: none hides menus, footers and notices that add nothing on paper.
  • break-inside: avoid keeps tables and images from splitting across pages.
  • @page sets paper size and margins (use size: letter in the US).

Common problems and fixes

  • White background, no colors: enable Background graphics or add print-color-adjust: exact; to your CSS.
  • Content cut off on the right: lower the scale to 80–90% or switch to landscape.
  • Cookie notice on every page: accept or close it before printing.
  • Missing images: some sites load them as you scroll. Scroll to the bottom of the page before converting.