Generating invoices manually is a time sink. Whether you are running a SaaS, freelancing, or managing an e-commerce platform, automating invoice generation saves hours every month and eliminates human error. The best approach? Convert HTML templates to PDF using an API.

In this guide, you will learn how to automate invoice generation by designing invoices in HTML and CSS, then converting them to pixel-perfect PDFs programmatically.

Why HTML to PDF for Invoices?

There are many ways to generate PDFs — libraries like ReportLab (Python), jsPDF (JavaScript), or wkhtmltopdf. But HTML-to-PDF has clear advantages:

  • Design with familiar tools — Use HTML and CSS, not complex PDF coordinate systems
  • Pixel-perfect rendering — The PDF looks exactly like the HTML
  • Easy to maintain — Designers can modify templates without touching code
  • Dynamic content — Use template engines to inject data
  • Consistent output — Same rendering engine every time

Building an Invoice Template

Let us start with a professional invoice HTML template:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1a202c;
      padding: 40px;
      max-width: 800px;
      margin: 0 auto;
    }
    .header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 40px;
    }
    .company-name {
      font-size: 28px;
      font-weight: 700;
      color: #2563eb;
    }
    .invoice-title {
      text-align: right;
    }
    .invoice-title h1 {
      font-size: 36px;
      color: #1a202c;
      margin-bottom: 4px;
    }
    .invoice-number {
      color: #718096;
      font-size: 14px;
    }
    .details {
      display: flex;
      justify-content: space-between;
      margin-bottom: 40px;
    }
    .details-section h3 {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: #a0aec0;
      margin-bottom: 8px;
    }
    .details-section p {
      font-size: 14px;
      line-height: 1.6;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 30px;
    }
    thead th {
      background: #f7fafc;
      padding: 12px 16px;
      text-align: left;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #718096;
      border-bottom: 2px solid #e2e8f0;
    }
    tbody td {
      padding: 16px;
      border-bottom: 1px solid #edf2f7;
      font-size: 14px;
    }
    .text-right { text-align: right; }
    .totals {
      display: flex;
      justify-content: flex-end;
    }
    .totals-table {
      width: 280px;
    }
    .totals-table tr td {
      padding: 8px 0;
      font-size: 14px;
    }
    .totals-table .total-row td {
      font-size: 18px;
      font-weight: 700;
      border-top: 2px solid #1a202c;
      padding-top: 12px;
    }
    .footer {
      margin-top: 60px;
      padding-top: 20px;
      border-top: 1px solid #e2e8f0;
      font-size: 12px;
      color: #a0aec0;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="header">
    <div class="company-name">Acme Corp</div>
    <div class="invoice-title">
      <h1>INVOICE</h1>
      <div class="invoice-number">#INV-2026-0042</div>
    </div>
  </div>

  <div class="details">
    <div class="details-section">
      <h3>Bill To</h3>
      <p><strong>John Smith</strong><br>
      Smith Enterprises<br>
      123 Business Ave<br>
      New York, NY 10001</p>
    </div>
    <div class="details-section">
      <h3>Invoice Details</h3>
      <p><strong>Date:</strong> February 12, 2026<br>
      <strong>Due Date:</strong> March 14, 2026<br>
      <strong>Payment Terms:</strong> Net 30</p>
    </div>
  </div>

  <table>
    <thead>
      <tr>
        <th>Description</th>
        <th>Qty</th>
        <th class="text-right">Rate</th>
        <th class="text-right">Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Web Development Services</td>
        <td>40 hrs</td>
        <td class="text-right">$150.00</td>
        <td class="text-right">$6,000.00</td>
      </tr>
      <tr>
        <td>UI/UX Design</td>
        <td>20 hrs</td>
        <td class="text-right">$125.00</td>
        <td class="text-right">$2,500.00</td>
      </tr>
      <tr>
        <td>Server Infrastructure (Monthly)</td>
        <td>1</td>
        <td class="text-right">$299.00</td>
        <td class="text-right">$299.00</td>
      </tr>
    </tbody>
  </table>

  <div class="totals">
    <table class="totals-table">
      <tr>
        <td>Subtotal</td>
        <td class="text-right">$8,799.00</td>
      </tr>
      <tr>
        <td>Tax (10%)</td>
        <td class="text-right">$879.90</td>
      </tr>
      <tr class="total-row">
        <td>Total</td>
        <td class="text-right">$9,678.90</td>
      </tr>
    </table>
  </div>

  <div class="footer">
    <p>Thank you for your business! Payment is due within 30 days.</p>
    <p>Questions? Email [email protected]</p>
  </div>
</body>
</html>

Converting HTML to PDF with the API

Now let us convert this template to a PDF using the ToolCenter:

cURL Example

curl -X POST "https://api.toolcenter.dev/v1/pdf" \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -d {