How to Convert HTML to PDF

Creating PDFs from HTML is useful for generating invoices, reports, letters, certificates, and any document where you want to control the layout with CSS but distribute as a PDF. A browser-based HTML-to-PDF converter uses your browser's own rendering engine, so the result matches what you see in the live preview, with no server uploads.

How to convert HTML to PDF

1. Paste your HTML: enter your HTML code including any inline CSS or <style> tags in the editor. The code can include full page structure with headers, tables, images, and styling.
2. Preview the output: a live preview shows exactly how your PDF will look as you type. Adjust your HTML and CSS until the preview matches what you want.
3. Generate and download: click the generate button to create the PDF in your browser, then download it instantly.

What you can create

• Invoices and receipts: structured tables with company branding, line items, and totals
• Reports: formatted documents with headings, paragraphs, charts, and data tables
• Certificates: styled layouts with custom fonts, borders, and centered text
• Letters: professional correspondence with header, body, and signature areas
• Resumes: designed layouts that export as clean PDFs for job applications
• Tickets and event passes: structured QR-code blocks with attendee info
• Shipping labels: standardized formats for postal carriers
• Boarding passes and confirmations: print-and-bring versions of online bookings
• Invitations: styled cards with images, fonts, and decorative borders

A brief history of HTML-to-PDF conversion

In the early Web (1995-2005), creating a PDF from HTML required server-side tools: Apache FOP (1999), PrinceXML (2002), or wkhtmltopdf (2010), all of which ran on a backend server and required uploading content. The output quality varied wildly because each rendering engine implemented CSS differently.

Browser-side conversion became practical in 2014 with libraries like jsPDF and html2pdf.js, which use HTML5 Canvas to rasterize content. The result was decent for simple documents but failed on complex layouts and selectable text.

The breakthrough was Chromium's headless mode (2017), which exposed the same rendering engine Chrome uses for normal pages. Puppeteer (Node.js, 2017) made server-side Chromium PDF generation accessible to developers. Browser-based converters now use Print API (window.print()) with @page CSS rules, the same path Chromium's headless mode uses, giving identical output between preview and PDF.

In 2026, browser-based HTML-to-PDF is the right choice for most documents. Server-side rendering only makes sense for very large documents (100+ pages), automated batch processing, or when you need to merge PDFs from multiple sources.

Styling tips for PDF output

Use inline styles or <style> tags: external stylesheets are not loaded. Put all your CSS either inline on elements or in a <style> block in the HTML.

Set page margins: use CSS @page { margin: 20mm; } to control the whitespace around your content in the PDF.

Use print-friendly units: mm, cm, and pt are more predictable in PDFs than px or rem. Use mm for margins and spacing that need to match real-world dimensions.

Avoid viewport-dependent layouts: percentage widths and fixed pixel widths work best. Viewport units (vw, vh) may not behave as expected in PDF output.

Control page breaks: use page-break-before, page-break-after, and page-break-inside (or the newer break-before, break-after, break-inside) to control where new pages start. break-inside: avoid keeps a single block from splitting across pages.

Use @media print for PDF-only rules: any CSS inside @media print { ... } applies only when generating the PDF, not in the preview. Useful for hiding screen-only elements like navigation bars.

CSS print-mode example

@page {
  size: A4;
  margin: 20mm 15mm;
}

@media print {
  .no-print { display: none; }
  h1 { page-break-before: always; }
  table { page-break-inside: avoid; }
  a { color: black; text-decoration: none; }
}

body {
  font-family: 'Helvetica', sans-serif;
  font-size: 11pt;
  line-height: 1.4;
  color: #1a1a1a;
}

Page sizes

Common @page size values:

• A4 (210 × 297 mm), global default outside the US
• letter (8.5 × 11 in), US default
• legal (8.5 × 14 in), US legal documents
• A3 (297 × 420 mm), posters, plans
• A5 (148 × 210 mm), booklets, flyers
• Custom: size: 100mm 150mm for any dimensions

Add landscape for landscape orientation: size: A4 landscape.

Common pitfalls

• External fonts do not load: web fonts hosted on external CDNs may not be embedded. Use @font-face with a base64-encoded font file inside the <style> tag, or stick to system fonts (Helvetica, Times, Arial, Courier).
• Images load slowly or not at all: external images may not be ready when the PDF is generated. Use base64 data URIs for guaranteed inclusion: <img src="data:image/png;base64,iVBORw0KGgoAAAA...">.
• Background colors stripped on print: browsers strip background colors and images by default for print to save ink. Add -webkit-print-color-adjust: exact; print-color-adjust: exact; to your body or specific elements.
• CSS Grid layouts breaking: older PDF engines do not fully support CSS Grid. Test with the live preview; fall back to table or Flexbox if Grid produces unexpected results.
• Page breaks in the middle of a table row: use tr { page-break-inside: avoid; } to keep rows together, or thead { display: table-header-group; } to repeat the table header on each page.
• Pixel sizes do not match physical dimensions: 1 CSS px = 1/96 inch when printing. So a width: 96px box is exactly 1 inch wide in the PDF. Use mm or pt for unambiguous physical sizing.
• Hyperlinks lose color: PDFs render <a> tags with their CSS-defined color. If you want black text but functional hyperlinks, use color: black and let the PDF reader's underline visual indicate the link.

Alternatives to consider

• Print to PDF directly from the browser (Ctrl/Cmd+P, then "Save as PDF"): zero setup, works for any web page you can open. Best for one-off conversions.
• Server-side rendering (Puppeteer, Playwright, PrinceXML): for batch generation, automation, or very large documents. Requires development setup.
• Markdown to PDF: if you write in Markdown, dedicated tools (Pandoc, Marp, Typora) handle the conversion in one step without HTML scaffolding.
• Document templating (DocRaptor, Tectonic, LaTeX): for highly-typeset documents (academic papers, books) where you need precise control over kerning, ligatures, math.

For everyday business documents (invoices, reports, certificates), a browser HTML-to-PDF converter is faster and just as polished.

Tips

• Preview first: always check the live preview before generating. It is much faster to iterate on HTML than to generate a new PDF each time.
• Use base64 for images: convert images to base64 data URIs for guaranteed inclusion in the PDF. External URLs can fail due to CORS restrictions.
• Keep it simple: complex CSS layouts (nested grids, overlapping positioned elements) may not render perfectly. Simpler layouts produce more reliable PDFs.
• Test page breaks: for multi-page documents, use page-break-before: always to control where new pages start.
• Print-mode CSS: wrap your final styles in @media print { ... } to make them apply only to the generated PDF, not the preview. Useful for hiding screen UI elements.
• Use semantic HTML: <h1>, <h2>, <p>, <table> produce cleaner accessible PDFs than <div> everywhere. Screen readers parse them correctly when the user opens the PDF.

Privacy and confidential documents

The HTML-to-PDF converter runs entirely in your browser. The HTML you paste, the images you embed, and the generated PDF all stay on your device. Nothing is uploaded to a server, logged, or shared with anyone.

This matters because HTML-to-PDF inputs are often sensitive: invoice data with client names, contract drafts with pricing terms, internal reports with financial figures, certificates with personal information. Cloud HTML-to-PDF services by design send your HTML to their server, generate the PDF there, and send it back. Some retain inputs for "improvement" or analytics. For documents containing confidential information, a browser-based converter is the safer choice.

Browser-based conversion also works offline once the page is loaded, and is fast enough for instant feedback as you iterate on the HTML.