How to Convert an HTML File to PDF With the Styling Intact
By the FreePDF team ·
An .html file is a fragile thing to hand someone. It looks right on the machine that made it and then arrives missing its stylesheet, or opens in a browser that lays it out differently, or gets blocked as an attachment. Turning it into a PDF fixes the page in place: one file, same layout everywhere, prints the way it looks.
What comes across, and what doesn't
Upload the .html or .htm file and it's rendered to PDF the way a browser would render it for printing. Worth knowing before you convert:
- CSS in the file is applied. Anything in a
<style>block or astyle=attribute comes across — fonts, colours, borders, tables, backgrounds. - JavaScript is not run. The page is rendered as it sits in the file. If a chart or a table is drawn by a script on load, the PDF gets the empty container it started with.
- Relative paths don't resolve. An uploaded file has no address to be relative to, so
<img src="images/logo.png">or<link href="style.css">has nothing to point at. Absolutehttps://URLs are fetched normally.
The fix for the last one is a single-file page: paste the CSS into a <style> block, and either use full URLs for images or embed them as data: URIs. Most tools that generate HTML reports — and your browser's "Save page as → single file" — already do this.
You can control the page setup from the CSS
Because the render happens as print output, print CSS is honoured. If you're generating the HTML yourself, a few rules go a long way:
@page { size: A4; margin: 20mm; }sets the paper size and the margins. UseLetterinstead ofA4if that's your paper.break-before: pageon a heading starts each section on a fresh sheet.break-inside: avoidon a table or a card stops it being sliced across two pages.- Rules inside
@media printapply, so navigation, banners, and anything else you'd hide from a printer stays out of the PDF.
When your browser's print dialog is the better tool
Worth saying plainly, because it's often the right answer: if what you want is a live web page saved as a PDF, open it and print to PDF. The browser already has the page loaded with its images, its scripts run, and you logged in, so it captures things an uploaded file simply doesn't contain.
Converting the file here is the better route when you have a self-contained .html on disk — an emailed invoice, a report written out by a script, an export from a tool, a saved receipt — and you want a clean PDF without the browser's own headers, footers, and page numbers stamped down the edges. It's also repeatable: the same file converts to the same PDF every time, on any machine, which a print dialog full of per-computer settings isn't.
And if you're writing the document rather than converting one, Markdown skips this whole problem — no CSS to manage and no assets to chase.
Common questions
Can I give it a URL instead of a file?
No — it converts a file you upload. Save the page first (Ctrl+S / Cmd+S, choosing the single-file option if your browser offers one), then upload that. For a page behind a login, saving it yourself is the only way the content gets out at all.
My PDF came out unstyled. What happened?
Almost always a stylesheet that lives in a separate file. The HTML references style.css, the upload was just the HTML, and there's nothing to load. Open the file in a text editor, drop the CSS into a <style> block in the <head>, and convert again.