Convert HTML Code to PDF

How to convert HTML to PDF — 3 steps

1. 1

   Supply the HTML

   Paste your markup directly, or give the address of a page you want captured. Pasted HTML is rendered locally without being sent anywhere.

2. 2

   Check the rendered result

   Look at how the content falls onto pages before exporting. Fixed-width layouts and wide tables are where the differences from a browser window show up first.

3. 3

   Download the PDF

   Save the document. What you get is a fixed page-based version of the content, readable and printable anywhere without the original stylesheet.

A web page and a PDF page are different surfaces

Almost every surprise in this conversion comes from one structural difference. A web page is continuous and elastic: it has no page boundaries, and its layout adapts to whatever width the window happens to be. A PDF is a stack of fixed-size sheets. Converting means taking something designed to flow and cutting it into A4 or Letter-sized pieces — and the cuts land wherever the content happens to be.

That is why output can look unlike the screen. Content sized in viewport units is measured against a page rather than a window. Layouts that assume a wide desktop viewport are rendered at the narrower width of a printed page, so a three-column grid may collapse or overflow. Elements pinned with fixed positioning, which stay put as you scroll, have no equivalent on a paginated surface and can repeat on every page or vanish. Anything that appears only after interaction — accordions, tabs, lazily loaded images, content drawn by JavaScript after load — is captured in whatever state it was in, which is usually closed or empty.

Page breaks are the most visible consequence and the easiest to control if you own the markup. CSS provides properties for exactly this: `break-inside: avoid` keeps a table row, figure, or card from being sliced across two sheets, and `break-before: page` forces a new page at a section heading. A few of these rules, applied to the elements that matter, turn a ragged export into a document that looks deliberately paginated.

Print stylesheets, and what conversion is good for

If you control the page, the single highest-value change is a print stylesheet. Rules inside a `@media print` block apply only when the content is being rendered to paper or PDF, and they let you strip everything that makes no sense there — navigation bars, sidebars, cookie banners, sticky headers, share buttons, comment sections — while widening the main content to fill the page. Many sites have a print stylesheet already; the ones that produce clean PDFs almost always do.

The usual uses are worth knowing because they shape how much of this matters. Generating invoices, receipts, tickets, and statements from HTML templates is the common one in software, where the layout is yours and can be built for the page from the start. Archiving a page as it existed on a particular date is the other, where fidelity to the original design matters less than capturing the content before it changes or disappears. Producing documentation or a reference sheet from a web source sits between the two.

One thing to be clear about: this is a snapshot, not a live copy. Links to other pages still work as links, but nothing in the PDF updates, and interactive content becomes a static picture of itself. That permanence is the point when you are archiving something — and a limitation if what you actually wanted was the page.

Related tools