HTML to PDF Converter

Convert any HTML and CSS code into a PDF document instantly in your browser — no upload, no server.

Last updated: March 25, 2026

Page Size

Orientation

Margin — 10mm

HTML Editor

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: Arial, sans-serif;
      color: #1a1a1a;
      margin: 0;
      padding: 0;
    }
    h1 { color: #2563eb; border-bottom: 2px solid #2563eb; padding-bottom: 8px; }
    h2 { color: #374151; margin-top: 24px; }
    p  { line-height: 1.7; color: #4b5563; }
    table { width: 100%; border-collapse: collapse; margin-top: 16px; }
    th { background: #2563eb; color: #fff; padding: 10px 14px; text-align: left; }
    td { padding: 9px 14px; border-bottom: 1px solid #e5e7eb; }
    tr:nth-child(even) td { background: #f9fafb; }
    .badge {
      display: inline-block;
      background: #dbeafe;
      color: #1d4ed8;
      border-radius: 4px;
      padding: 2px 10px;
      font-size: 13px;
      font-weight: 600;
    }
  </style>
</head>
<body>
  <h1>Sample Report</h1>
  <p>This is a <strong>sample HTML document</strong> rendered as a PDF.
  Edit the code on the left to see the preview update in real time.</p>

<h2>Summary <span class="badge">Q1 2025</span></h2>
  <p>Replace this content with your own HTML — invoices, reports, letters, or anything else.</p>

<table>
    <thead>
      <tr><th>Item</th><th>Quantity</th><th>Price</th></tr>
    </thead>
    <tbody>
      <tr><td>Widget A</td><td>12</td><td>$24.00</td></tr>
      <tr><td>Widget B</td><td>5</td><td>$60.00</td></tr>
      <tr><td>Service Fee</td><td>1</td><td>$15.00</td></tr>
    </tbody>
  </table>
</body>
</html>

Live Preview(approximate — actual PDF may differ slightly)

Tip: Inline styles and <style> blocks are fully supported. External fonts or cross-origin images may not render in the PDF.

Client-Side Processing

Input Data Stays on Device

Instant Local Execution

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What is HTML to PDF Converter?

Converting HTML to PDF is the most common way to generate printable or shareable documents from web content — invoices, reports, certificates, contracts, and formatted emails are all typically built in HTML and then exported as PDF for distribution. HTML+CSS is the most widely understood document formatting language, and PDF is the universal print and archive format, making this combination essential for developers and content creators.

This tool renders your HTML code (with inline or embedded CSS) in an isolated browser frame, then captures it as a PDF using html2canvas (for rasterization) and jsPDF (for PDF generation). The conversion happens entirely in your browser — your HTML code is never sent to any server. You can choose A4 or US Letter page size, portrait or landscape orientation, and preview the output before downloading.

How to Use HTML to PDF Converter

Paste your HTML code into the editor (includes a starter template if needed)

Add inline or <style> tag CSS to control fonts, layout, and styling

Choose your page size (A4 or US Letter) and orientation (portrait or landscape)

Click "Preview" to see how the PDF will look before downloading

Click "Convert to PDF" to generate and download the final document

Common Use Cases

Generating invoice PDF files from HTML invoice templates (Freelancers, SaaS tools)
Converting HTML email templates into printable PDF letterhead documents
Exporting styled reports and dashboards built with HTML tables into PDF format
Creating PDF certificates or diplomas from HTML + CSS designs
Generating PDF receipts from browser-rendered order confirmation pages
Converting HTML documentation pages into printable PDF guides for offline use
Exporting HTML form data as a structured PDF submission record
Testing how an HTML design renders in fixed-page PDF format vs. responsive web

Example Input and Output

A simple HTML invoice that converts cleanly to a professional PDF document:

HTML input

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: Arial, sans-serif; margin: 40px; }
  h1 { color: #1a1a2e; }
  table { width: 100%; border-collapse: collapse; margin-top: 20px; }
  td, th { padding: 10px; border-bottom: 1px solid #ddd; }
  .total { font-weight: bold; font-size: 1.2em; }
</style>
</head>
<body>
  <h1>Invoice #INV-2024-0042</h1>
  <p>To: Acme Corp | Due: April 1, 2024</p>
  <table>
    <tr><th>Service</th><th>Qty</th><th>Price</th></tr>
    <tr><td>Web Design</td><td>1</td><td>$1,500</td></tr>
    <tr><td>SEO Setup</td><td>1</td><td>$500</td></tr>
    <tr class="total"><td colspan="2">Total</td><td>$2,000</td></tr>
  </table>
</body>
</html>

PDF output description

PDF: invoice-INV-2024-0042.pdf
Page size: A4 Portrait
Content: Styled invoice table with fonts and colors
File size: ~120 KB
Ready for: email, printing, or client portal upload

Privacy First

Your HTML code is processed entirely in your browser. Nothing you type or paste is transmitted to our servers — including sensitive content like invoice data, names, or pricing templates.

Best Fonts for PDF

Use system-safe fonts (Arial, Helvetica, Georgia, Times New Roman, Courier New) for the most reliable PDF rendering. For custom fonts, embed them via @font-face with a base64-encoded font data URI inside a <style> tag — this ensures the font loads regardless of network access.

Page Break Control

Add CSS page-break-before: always to elements (like <h2> section headers or <div> containers) where you want forced page breaks. This is essential for multi-page invoices, reports, or any document where you need precise control over where content wraps across pages.

Frequently Asked Questions

What CSS is supported in the HTML to PDF conversion?

Inline styles (style="...") and embedded <style> tags are fully supported. External stylesheets linked via <link> tags from external URLs may not load due to browser CORS security restrictions. Google Fonts can be embedded using @import in a <style> tag. CSS Grid, Flexbox, custom properties, and most modern CSS layout features are supported.

Why does my PDF look different from my browser rendering?

The conversion uses html2canvas, which rasterizes the HTML like a screenshot before embedding in the PDF. Differences can occur because: (1) external web fonts may not load, (2) CSS transitions/animations are captured in their current state, (3) some advanced CSS properties (mix-blend-mode, backdrop-filter) may not render. Use system fonts (Arial, Georgia, Courier New) for the most reliable results.

Can I include images in my HTML?

Yes. Images with data URIs (base64 encoded) will always work. Images served from CORS-enabled URLs will also load. However, images from cross-origin servers that don't include CORS headers (Access-Control-Allow-Origin) will not render in the PDF due to browser security. When in doubt, convert images to base64 data URIs and embed them directly in the HTML.

Can I generate multi-page PDFs?

Yes. Content that is taller than one page will automatically flow onto additional pages. For a more controlled multi-page layout, use CSS page-break-before: always or page-break-after: always on elements where you want page breaks to occur. This ensures headers and footers land in the right positions.

What page sizes and orientations are available?

A4 (210mm × 297mm) and US Letter (215.9mm × 279.4mm) in both Portrait and Landscape orientations. A4 is standard for most of the world; US Letter is the standard in North America. For custom dimensions, adjust the content width in your CSS to fit within the chosen page.

Is my HTML code sent to a server?

No. All HTML rendering and PDF generation happens in your browser using html2canvas and jsPDF. Your HTML code — including any sensitive content like invoice amounts, personal details, or API keys in templates — never leaves your device.

How This Tool Works

The HTML content is written into a sandboxed, off-screen iframe rendered at the target page width. html2canvas traverses the live DOM of the iframe, rendering HTML elements and CSS styles onto a Canvas, handling fonts, backgrounds, borders, and images. The resulting canvas is exported as a high-DPI image and embedded into jsPDF's page using addImage(). For content taller than one page, the canvas is sliced into page-height sections and each slice is added as a new PDF page. The final PDF is generated as a Blob and downloaded.

Technical Stack

html2canvasjsPDFOff-screen iframe renderingClient-side onlyNo server upload

Related Tools

PDF to Image Converter

Convert PDF pages to high-quality JPEG or PNG images — choose DPI, page range, and format.

Image to PDF Converter

Convert JPEG, PNG, and WebP images into a single PDF document — drag to reorder, choose page size.

Merge PDF

Combine multiple PDF files into a single document — drag to reorder, merge instantly in your browser.

Split PDF

Extract specific pages or split a PDF into separate files — by range, every page, or custom groups.

Scanned PDF Converter

Make digital PDFs look like scanned documents.