How to convert HTML to PDF (code, files and webpages)

HTML is the easiest way to design a document, and PDF is the easiest way to share one. Converting between them is simple once you know what the converter is doing: it opens your HTML in a real browser engine (Chromium), lays it out for print, and saves the printed pages as a PDF. Anything that affects how a browser prints affects your PDF.

Three ways to start

1. Paste HTML code

Best for snippets, templates and documents you generate yourself. Paste a full document or just a fragment such as <h1>Report</h1><p>…</p>; fragments are wrapped automatically. The live preview shows the layout as you type, with scripts and external requests blocked for safety, so treat it as a guide rather than an exact proof.

2. Upload an HTML file

Choose one .html or .htm file saved as UTF-8, up to 2 MiB. Only that file is sent, so images or stylesheets sitting next to it on your computer are not included. Embed them in the file or link to them with full public URLs (see fonts and images in HTML to PDF).

3. Convert a webpage URL

Paste a public http:// or https:// address and the converter loads the page itself. This works for most public articles, documentation and receipts. Pages behind a login, on private networks, on custom ports, or protected against automated browsers can’t be converted; save their HTML and paste it instead.

Choose page settings

• Page size: A4 (the default), US Letter or Legal.
• Orientation: portrait or landscape. Wide tables and dashboards usually fit better in landscape.
• Margins: 0–50 mm on every side, 10 mm by default. Set 0 if your design already includes its own padding.
• Print backgrounds: on by default. Turning it off removes only the page background (a colour or image on html or body); backgrounds on other elements still print. See background colours in PDF for an ink-friendly version.

The paper size comes from these settings: a CSS @page { size: … } rule can’t change it, so pick the paper here. Two CSS rules do take effect, though. An @page margin replaces the Margins setting, and size: landscape or size: portrait sets the orientation. See the complete guide to print CSS.

Make it look like a document, not a screenshot

A web page is one long scrolling canvas; a PDF is a stack of fixed-size pages. Three small CSS habits close most of the gap:

@media print {
  nav, .cookie-banner, .no-print { display: none; }
  body { font-size: 11pt; }
}
h2 { break-after: avoid; }          /* keep headings with their text */
table, figure { break-inside: avoid; }
.chapter { break-before: page; }    /* start each chapter on a new page */

The converter prints with the print media type, so @media print rules apply. Our guides to print CSS and CSS page breaks go deeper.

Common problems and fixes

• “This document or one of its resources could not load.” The page, or an asset it links to, couldn’t be reached: for example a host that doesn’t exist or a private address. Check every URL opens in a private browser window.
• Everything looks too small, or columns are missing. An element wider than the page makes the whole page shrink to fit, and content inside a horizontally scrolling box is cut off. Use max-width: 100%, remove scrolling wrappers for print, or switch to landscape. See saving a webpage without cutting it off.
• Accents or symbols look wrong. Save the file as UTF-8 and include <meta charset="utf-8">.
• Too many pages. Documents are limited to 100 pages and 20 MiB. Split long reports into parts.

What happens to your document

Your HTML or URL is sent to an isolated converter, rendered, and returned to your browser as a PDF. Documents aren’t saved to persistent storage, and the PDF stays in your browser until you close or replace it. The Privacy page has the details.