How to Convert HTML to PDF

HTML is built to flow — it reshapes itself to whatever screen it lands on. A PDF is the opposite: a fixed page that looks identical everywhere. Converting one to the other comes up constantly: you've built an invoice template, an email receipt, a report, or an exported page and you need a single file that prints cleanly and looks the same for everyone who opens it.

This guide covers converting an HTML file or pasted HTML code to PDF, the page options that decide how it lays out, and the CSS gotchas worth knowing before you convert.

Before you start

A couple of things worth knowing first:

• You're converting HTML source, not a live URL. This tool takes an HTML file or pasted HTML/CSS — it isn't a "fetch this web address" converter. If your goal is to save a page you're looking at in a browser, see our guide on saving a web page as a PDF, which covers how to get the page's HTML first.
• External resources need to be reachable. If your HTML links to CSS, fonts, or images by URL, those need to be publicly accessible to render. Anything that points at localhost, a private server, or a file on your own disk won't load. Inline or self-contained HTML is the most reliable.

The steps

1. Open Blackpdf's HTML to PDF tool and give it your HTML one of two ways:

   • Upload an HTML file — click Select HTML File and pick your .html file.
   • Paste HTML code — click or paste HTML code and type or paste your markup into the editor. Good for a quick snippet or a template you're iterating on.

2. Set the Conversion Options (covered below): Page size, Orientation, Margins, and Background graphics.

3. Click Convert to PDF.

4. Download the result. Click the filename to rename it first if you like.

The conversion options, and when they matter

• Page size — A4, Letter, Legal, or A3. A4 is the global default; Letter is standard in North America. Match it to where the PDF is going (most office printing outside the US/Canada expects A4). A3 is for wide content — large tables or layouts that get cramped on a normal sheet.
• Orientation — Portrait or Landscape. Switch to Landscape for wide tables, dashboards, or anything that runs off the right edge in portrait.
• Margins — None, Small, Default, or Large. Default suits most documents. Pick None when your HTML/CSS already controls its own spacing (common for full-bleed designs and invoice templates built to exact dimensions) — otherwise you get a margin on top of your margin.
• Background graphics — On or Off. This is the one people miss. Browsers and converters skip background colours and images by default to save ink. If your page has a coloured header bar, a watermark, or a card with a shaded background, turn this On or it prints blank where the background should be.

Common questions

Why does my PDF look different from the page in my browser?

A converter renders your HTML and CSS to a fixed page, and a few things shift in that process: anything sized to the screen (viewport units, 100vh) maps onto paper differently, and print rules in your CSS (@media print) take effect when they wouldn't on screen. The fix is usually to design with print in mind — use fixed widths or print stylesheets — and to turn Background graphics on so shaded areas survive.

Can I convert a page that needs JavaScript to render?

It depends on the page. Static HTML and CSS convert reliably. Markup that builds itself with JavaScript after load is less predictable — the safest approach is to capture the rendered HTML (after the scripts have run) and convert that, rather than the bare template.

My fonts came out wrong.

Custom fonts have to be reachable — either embedded in the HTML, loaded from a public web-font URL, or a common system font. A font installed only on your own machine won't be available to the converter, so it falls back to a default. Use a hosted web font or inline the font to be safe.

The colours and backgrounds printed white.

Turn Background graphics to On. Background colours and images are omitted by default; that switch tells the converter to keep them.

Can I convert several HTML files into one PDF?

Convert each file to PDF, then combine them with Merge PDF. If the result needs to be smaller afterwards, run it through Compress PDF.

Wrap-up

The flow is short:

1. Upload an HTML file or paste your HTML code into HTML to PDF.
2. Set Page size, Orientation, Margins, and Background graphics.
3. Click Convert to PDF and download.

Two things to remember: this converts HTML source (not a live URL — to save a page you're viewing, see how to save a web page as a PDF), and if your design has colours or shaded backgrounds, turn Background graphics on so they don't print blank.