Skip to main content
All posts
HTML PDF conversion CSS API

HTML to PDF Conversion at PodPDF

How PodPDF turns HTML into accurate PDFs with a real browser engine: full CSS, JavaScript-rendered content, custom fonts and precise layout control.

PodPDF Team April 20, 2026 6 min read

HTML is the most expressive format for defining document layouts — you have the full power of CSS for typography, positioning, color, and responsive design. PodPDF renders HTML to PDF using a modern headless browser engine, which means if it works in Chrome, it works in PodPDF.

How HTML-to-PDF Rendering Works at PodPDF

When you submit HTML to PodPDF, the rendering pipeline:

  1. Loads the HTML in a headless browser context
  2. Fetches external resources — stylesheets, fonts, images, and scripts from HTTPS URLs
  3. Executes JavaScript if present (useful for chart libraries, dynamic content)
  4. Waits for the network to go idle, so late-loading fonts and images are in place
  5. Applies print CSS — @media print rules are respected
  6. Renders to PDF using the browser’s built-in print engine with your specified options

This approach means you get browser-grade rendering fidelity — not an approximation.

What’s Supported

CSS

Full modern CSS is supported:

  • Flexbox and CSS Grid layouts
  • CSS custom properties (variables)
  • CSS transforms and positioning
  • @font-face (custom fonts via URL)
  • @media print rules
  • CSS page break controls (break-before, break-after, break-inside, and the legacy page-break-* equivalents)

JavaScript

JavaScript is executed before rendering. This means you can use:

  • Chart libraries (Chart.js, D3, etc.)
  • Dynamic content generation
  • Data formatting libraries
  • Any code that modifies the DOM before printing

External Resources

Images, stylesheets, and fonts loaded via absolute HTTPS URLs are fetched and embedded during rendering. This includes Google Fonts, CDN-hosted CSS frameworks (Tailwind, Bootstrap), and hosted images.

Relative paths like css/site.css have nothing to resolve against when you send a single HTML string. If your HTML references local files, use bulk conversion and ship them in the same ZIP.

API Usage

Requests go to POST /quickjob with your API key in the X-API-Key header, and input_type says what you’re sending.

Inline HTML

curl -X POST https://api.podpdf.com/quickjob \
  -H "X-API-Key: YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "input_type": "html",
    "html": "<!DOCTYPE html><html><head><style>body { font-family: Georgia, serif; } h1 { color: #1a1a2e; }</style></head><body><h1>Quarterly Report</h1><p>Revenue: $1.2M</p></body></html>",
    "options": {
      "format": "A4",
      "margin": { "top": "20mm", "bottom": "20mm", "left": "25mm", "right": "25mm" }
    }
  }' \
  --output report.pdf

The response body is the PDF itself. Add "store": true to get JSON with a download_url instead — valid for one hour, with the file kept for 30 days.

/quickjob handles documents up to 25 pages within 30 seconds. For longer documents, use POST /longjob, which runs asynchronously and accepts up to 100 pages.

With a URL

Convert a public HTTPS page to PDF:

curl -X POST https://api.podpdf.com/quickjob \
  -H "X-API-Key: YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "input_type": "url",
    "url": "https://example.com/report.html",
    "options": { "format": "A4" }
  }' \
  --output report.pdf

PodPDF fetches the page server-side and renders the HTML it gets back. That means assets referenced by absolute URL load, but relative ones on that page don’t, and pages that build their content entirely in the browser after load may not render the way they look in your own browser. For pages you control, sending the HTML directly gives the most predictable result.

PDF Options Reference

Page format

{
  "options": {
    "format": "A4",
    "landscape": false
  }
}

Supported formats: A4, A3, A5, Letter, Legal, Tabloid.

Custom page size

{
  "options": {
    "width": "210mm",
    "height": "297mm"
  }
}

Margins

{
  "options": {
    "margin": {
      "top": "20mm",
      "right": "15mm",
      "bottom": "20mm",
      "left": "15mm"
    }
  }
}

Headers and footers

{
  "options": {
    "displayHeaderFooter": true,
    "headerTemplate": "<div style='width:100%; text-align:center; font-size:10px; color:#666;'>Confidential</div>",
    "footerTemplate": "<div style='width:100%; text-align:right; font-size:10px; color:#666; padding-right:20px;'>Page <span class='pageNumber'></span> of <span class='totalPages'></span></div>"
  }
}

The classes pageNumber, totalPages, date, title, and url are automatically substituted in header/footer templates. There’s no default page margin, so set top and bottom margins large enough for your header and footer, or they’ll overlap the content.

Background graphics

By default, CSS backgrounds are included. You can disable them:

{
  "options": {
    "printBackground": false
  }
}

Controlling Page Breaks in CSS

Use CSS page break properties to control how your content paginates:

/* Keep a heading with the content that follows it */
h2, h3 {
  break-after: avoid;
}

/* Force a new page before each section */
.section {
  break-before: page;
}

/* Keep a table on a single page if possible */
table {
  break-inside: avoid;
}

/* Keep a card component together */
.card {
  break-inside: avoid;
}

Custom Fonts

Load custom fonts via @font-face with HTTPS URLs:

<style>
  @font-face {
    font-family: 'Inter';
    src: url('https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiJ-Ek-_EeA.woff2') format('woff2');
  }

  body {
    font-family: 'Inter', sans-serif;
  }
</style>

Google Fonts can also be loaded via the standard <link> tag.

Design Tips for Print

HTML is designed for screens; PDFs are for print. A few conventions improve output:

Use mm or pt units for print-specific sizes rather than px or rem — they map directly to physical dimensions.

Use @media print to override screen-specific styles without duplicating rules:

@media print {
  .sidebar { display: none; }
  .nav { display: none; }
  .content { width: 100%; }
}

Set color-adjust: exact (or -webkit-print-color-adjust: exact) on elements with background colors to ensure they render in the PDF:

.highlighted {
  background-color: #fff3cd;
  -webkit-print-color-adjust: exact;
  color-adjust: exact;
}

Test page breaks early — Overly long tables or deeply nested flexbox layouts can produce unexpected breaks. Test with real data.

Common Use Cases

  • Invoices and receipts — Generate pixel-perfect invoices from HTML templates with dynamic data
  • Reports and dashboards — Snapshot data visualizations to PDF using JavaScript chart libraries
  • Contracts and agreements — Convert HTML agreement templates to signed, archivable PDFs
  • Certificates — Custom-designed certificate PDFs from HTML layouts
  • Email archives — Convert HTML email content to PDF for record-keeping

Getting Started

Create a PodPDF account and buy credits — $0.01 per PDF, and credits never expire. The API documentation covers all options in detail.

Related Posts

split n8n

Automate Payslip and Statement Splitting with n8n and Zapier

Split a payslip or statement run into one PDF per person, automatically: step-by-step n8n and Zapier workflows using the PodPDF split API.

Read
templates certificates

Generate Certificates in Bulk from a Spreadsheet

Turn a CSV of course graduates or event attendees into personalised certificate PDFs with signatures and verification QR codes, using a PodPDF template.

Read
templates invoices

Generate Invoice PDFs from JSON with PodPDF Templates

Design an invoice once in a visual editor, then create PDFs by sending JSON: line items, tax and totals calculated, any paper size, $0.01 per PDF.

Read

Start generating PDFs today

$0.01 per PDF — no subscriptions, no monthly minimums. Credits never expire.

Get Started API Docs