Blog

How to Generate PDF Invoices from HTML Templates

2026-04-20 · 8 min read

Generating PDF invoices is one of the most common requirements for SaaS applications, e-commerce platforms, and marketplaces. Yet most developers struggle with the available tools. Puppeteer is heavy, ReportLab is limited, and wkhtmltopdf is deprecated. In this guide, we'll show you how to generate professional PDF invoices from HTML templates using a modern REST API — no headless browsers required.

Why HTML templates for invoices?

HTML and CSS are the most powerful layout languages available. With Flexbox, Grid, and modern typography, you can design invoices that look identical across every platform. Your designers already know HTML. Your templates are version-controlled. And with a PDF API, you convert that HTML to a pixel-perfect PDF in milliseconds.

Designing the invoice template

Start with a standard HTML document. Use CSS for layout, fonts, and colors. Include placeholders for dynamic data using Handlebars syntax:

invoice-template.html

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: Arial, sans-serif; margin: 40px; }
    .header { display: flex; justify-content: space-between; }
    .total { font-size: 24px; font-weight: bold; margin-top: 20px; }
  </style>
</head>
<body>
  <div class="header">
    <h1>Invoice {{invoice_number}}</h1>
    <p>{{date}}</p>
  </div>
  <p><strong>Bill to:</strong> {{customer_name}}</p>
  <table>
    <tr><th>Item</th><th>Qty</th><th>Price</th></tr>
    {{#each items}}
    <tr><td>{{name}}</td><td>{{quantity}}</td><td>{{price}}</td></tr>
    {{/each}}
  </table>
  <p class="total">Total: {{total}}</p>
</body>
</html>

Rendering the PDF via API

Send your template and data to the PDF API. In under 300ms, you'll receive a secure URL to download the PDF:

render-invoice.js

const response = await fetch("https://api.pdfapi.dev/v1/render", {
  method: "POST",
  headers: {
    "Authorization": "Bearer YOUR_API_KEY",
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    html: invoiceTemplate,
    data: {
      invoice_number: "INV-001",
      date: "2026-04-20",
      customer_name: "Acme Corp",
      items: [
        { name: "Consulting", quantity: 10, price: "€150.00" },
        { name: "Hosting", quantity: 1, price: "€49.00" },
      ],
      total: "€1,549.00",
    },
  }),
});

const { url } = await response.json();

Next steps

Start with our free tier (500 PDFs/month) and explore the full API documentation. For multi-page reports with headers and footers, check our templates system.