How to Convert an HTML Invoice or Receipt to PDF

Plenty of invoices, receipts, and reports start life as HTML. It's the natural format to build them in — a template, some CSS, a bit of data merged in — but HTML isn't what you send a client or file for your records. That has to be a PDF: a fixed page that prints identically and can't be casually edited.

Templated documents like these are fussier to convert than a plain web page, because the layout is exact — a logo in the corner, a totals box that has to align, a coloured header. This guide covers the settings that make an HTML invoice or receipt come out looking the way you designed it.

Before you start

• Make the HTML self-contained where you can. Inline the CSS, and either inline images (as data URLs) or link them from a publicly reachable URL. A logo loaded from localhost or a private path won't appear in the converted PDF.
• Design to a paper size. Invoices are meant for a fixed page, so it helps if your template's widths target A4 or Letter rather than a fluid screen width. Avoid viewport units (vw/vh) for anything that needs to land at a specific size on paper.

The steps

1. Open Blackpdf's HTML to PDF tool and provide your template: upload the HTML file, or click or paste HTML code and paste your rendered invoice markup.

2. Set Page size to match your template — A4 or Letter for most invoices. (Use whichever your region and your client expect; the two are slightly different dimensions.)

3. Set Margins deliberately. This is the setting that trips up templated documents:

   • If your invoice CSS already defines its own padding and spacing — which most well-built templates do — choose None, so the converter doesn't add a second margin on top of yours and shove everything off-centre.
   • If your HTML has no spacing of its own, pick Default for a normal document margin.

4. Turn Background graphics On. Invoices almost always have a coloured header bar, a shaded totals box, or a faint logo watermark. These are CSS backgrounds, which are dropped by default — switch this On or they print as blank white.

5. Set Orientation (Portrait for a standard invoice; Landscape only for wide line-item tables), then click Convert to PDF.

6. Download, and rename it to something like invoice-1043.pdf before saving.

Tip: if you generate invoices in bulk from the same template, convert each one and then assemble a batch with Merge PDF — handy for sending a month of receipts as one file.

Common questions

My header bar / totals box printed white. Why?

Those are CSS background colours, and converters drop backgrounds by default to save ink. Set Background graphics to On and they'll render.

The invoice has a big white margin around it that I didn't design.

That's the converter's margin stacking on top of your template's own padding. Set Margins to None and let your CSS control the spacing.

My logo or signature image is missing.

The image has to be reachable by the converter. Inline it as a data URL, or host it at a public HTTPS address. Images referenced from your local machine or an internal server won't load.

A wide line-item table runs off the right edge.

Switch Orientation to Landscape, or step the Page size up to A3 to give a wide table room. Better still, set fixed column widths in your CSS so the table fits the page you're targeting.

Can I password-protect the finished invoice?

Yes — convert to PDF first, then add a password with Protect PDF. And if a client needs to sign it, Sign PDF handles that on the converted file.

How do I send a whole month of invoices as one PDF?

Convert each invoice, then combine them with Merge PDF. If the combined file is large, Compress PDF trims it for email.

Wrap-up

For a templated document the settings do the work:

1. Provide your HTML to HTML to PDF (upload or paste).
2. Page size to match the template (A4 / Letter).
3. Margins: None if your CSS already handles spacing.
4. Background graphics: On so coloured headers and shaded boxes survive.
5. Convert to PDF, download, rename.

Those four settings are the difference between an invoice that looks designed and one that looks broken. For the general workflow and CSS gotchas, see how to convert HTML to PDF.