How to Convert HTML to PDF Without Losing Formatting

Your HTML looks fine in the browser, but the PDF comes out with missing colors, tables sliced across pages, or a blank space where a chart should be. The fix is to pick the right kind of export (print-engine text or pixel snapshot) and, when you control the code, add a few lines of print CSS.

Key Takeaways

• There are two ways to make a PDF from HTML: the browser's print engine (selectable text, smaller files) or a screenshot (exact look, text not selectable).
• Most formatting loss comes from print rules: backgrounds are dropped by default, page breaks land mid-row, and fixed-width layouts overflow the paper.
• Four CSS rules fix most problems: @page, break-inside: avoid, print-color-adjust: exact, and a proper <thead>.
• HTMLViewer.io exports either kind of PDF from pasted HTML, without an account.

#Why HTML loses its formatting when saved as PDF

HTML is built for a scrolling screen of any width; a PDF is a stack of fixed-size pages. When a browser converts one to the other, it switches to "print" mode and makes decisions you didn't make.

Here's what usually goes wrong:

If you wrote the HTML yourself, you can fix most of this in CSS. If someone sent you the file, or an AI chatbot generated it, the quicker route is usually choosing the right export mode.

#Text PDF vs. snapshot PDF: which one do you need?

Use a text (print-engine) PDF by default; switch to a snapshot when the visual layout matters more than the text. The difference is how the PDF is built.

A print-engine PDF is what you get from the browser's Print → Save as PDF. The browser lays the page out again for paper and writes real text and vector shapes into the file. A snapshot PDF takes an image of the rendered page and slices it into pages.

A good rule: if someone will search the PDF, copy from it, or click links in it, use text mode. If it's going into a slide deck or an archive and must look exactly as it does on screen, use a snapshot.

#How to save HTML as PDF with your browser's print dialog

Every desktop browser can do this: open the HTML file, press Ctrl+P (Cmd+P on Mac), and choose Save as PDF as the destination. It's free and gives you a text PDF.

1. Open the .html file in Chrome, Edge, Firefox or Safari (double-click it, or drag it into a browser window).
2. Press Ctrl+P / Cmd+P.
3. Set the destination to Save as PDF.
4. Open the extra settings and check paper size, margins and scale.
5. If colors are missing, turn on the option for background graphics (the wording varies by browser).
6. Save.

The catch is that you get the browser's default page breaks. If the result still looks wrong, it's time for print CSS.

#Print CSS that keeps your formatting intact

Four small rules solve most HTML-to-PDF problems. Put them in a <style> block, either at the top level or inside @media print { ... } so they don't affect the screen view.

<style>
  /* 1. Paper size and margins */
  @page {
    size: A4 portrait;
    margin: 15mm;
  }

  /* 2. Don't split these across pages */
  tr, img, figure, .card {
    break-inside: avoid;
  }

  /* 3. Keep background colors and images */
  body {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  /* 4. Repeat table headers on every page */
  thead {
    display: table-header-group;
  }
</style>

What each rule does:

• @page sets the page box size and margins. size accepts keywords like A4, letter and landscape. See MDN: @page.
• break-inside: avoid tells the browser not to place a page break inside that element. It's widely supported, though MDN notes some parts have varying support, so test with your target browser. See MDN: break-inside.
• print-color-adjust: exact stops the browser from dropping backgrounds and adjusting colors for print. MDN marks it Baseline 2025, so keep the -webkit- prefixed version for older browsers. See MDN: print-color-adjust.
• thead { display: table-header-group } is the browser's default for <thead>, but CSS frameworks and "div tables" sometimes override it. Restoring it lets browsers repeat the header row on each printed page of a long table. See MDN: <thead> and MDN: display.

Two more habits help. Replace fixed pixel widths with max-width: 100% so the layout fits the paper. And if the page has charts, turn off their animation (in Chart.js, animation: false) so the print engine never catches them half-drawn.

#How to export HTML to PDF with HTMLViewer.io

If you can't or don't want to edit the CSS, HTMLViewer.io gives you both export modes from one dialog. It's a free, in-browser HTML viewer: you paste code, see a live preview, and export. There's no file upload, so you copy the code in.

1. Copy the HTML. Open the .html file in a text editor (Notepad, TextEdit, VS Code), select all, and copy. If the HTML came from ChatGPT, Claude or Gemini, copy it from the chat. See how to preview AI-generated HTML for tips.
2. Paste it into the editor. The live preview renders the page, including CSS, JavaScript and charts from CDN libraries. Check that everything has loaded before exporting.
3. Click Export PDF in the preview toolbar.
4. Choose a quality mode:
   • Text (recommended) gives you selectable, searchable text and working links. It uses the browser's print engine, so it opens the print dialog, where you choose Save as PDF. Options include Keep tables & images on one page (so rows and images aren't split), page numbers, and background colors & images.
   • Exact snapshot makes a pixel-identical copy of what's on screen and downloads it directly. Text isn't selectable and the file is larger, but page breaks are placed on blank rows so lines aren't cut in half.
5. Set the paper: A4 or Letter, Portrait or Landscape, and margins of None, Narrow or Normal.
6. Export. In text mode, finish in the print dialog; the snapshot downloads on its own.

You don't need an account to export. Signing in with Google is only required if you also want to save the document or share it as a link. People who open a shared link also get an Export PDF button, which is handy when you send a report to someone without hosting it.

A quick way to choose: start with Text mode and the "Keep tables & images on one page" option. If the charts or layout still look off, export again with Exact snapshot.

#Converting HTML to PDF on iPhone and iPad

On iPhone and iPad, use Exact snapshot. Printing works differently on iOS than on desktop browsers, and in HTMLViewer.io text mode may print the whole page there, so the snapshot mode is the more reliable choice.

Getting the code in is the other hurdle on a phone. Open the file in an app that shows the source (a text, notes or files app), copy it, and paste it into HTMLViewer.io's Code tab; the View tab shows the result. The guide to opening HTML files on iPhone and Android covers this step by step.

#Code-based options for developers

If you need PDFs generated automatically (invoices, reports in a pipeline), use a headless browser instead of a manual export.

• Puppeteer / headless Chrome. page.pdf() renders the page with the print media type. By default it uses Letter paper and doesn't print backgrounds, so pass printBackground: true, and set preferCSSPageSize: true if you want your @page size to win (PDFOptions reference). Call page.emulateMediaType('screen') first if you want the screen styles instead of print styles.

await page.goto(url, { waitUntil: 'networkidle0' });
await page.pdf({
  path: 'report.pdf',
  format: 'A4',
  printBackground: true,
  preferCSSPageSize: true,
});

• Playwright offers a similar page.pdf() method if that's already your test tool.
• wkhtmltopdf still turns up in old tutorials, but its GitHub repository was archived on January 2, 2023 and is read-only. It uses an old Qt WebKit engine, so modern CSS such as flexbox and grid often renders poorly. Prefer a Chromium-based tool for new projects.

The same print CSS from earlier works with all of these, because they use the same print engine as the browser.

#Troubleshooting checklist

Match the symptom to the fix:

If you're still deciding which tool to use for everyday HTML viewing, the comparison of online HTML viewers covers the trade-offs.