How to Generate a PDF Invoice from an HTML Template Using PDF.co and Postman

6 Minutes Read

This tutorial shows you how to create a reusable HTML invoice template and populate it with JSON data through the PDF.co Web API. You can use the same template to generate invoices for different customers and transactions.

What You’ll Need

A PDF.co account
Your PDF.co API key
The Postman desktop application
An HTML invoice template saved in PDF.co

IN THIS TUTORIAL

Create the Invoice Template

Copy the Template ID

Create a Postman Request

Add the Invoice Data

Generate the Invoice

Review the PDF

Step 1: Create the Invoice Template

Create a new template and give it a descriptive name, such as:

Customer Invoice

Add an HTML template containing placeholders for the invoice data:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    body {
      margin: 0;
      color: #222;
      font-family: Arial, sans-serif;
      font-size: 12px;
    }

    .invoice {
      max-width: 760px;
      margin: 0 auto;
    }

    .header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 30px;
    }

    h1 {
      margin: 0;
      color: #2457a7;
    }

    table {
      width: 100%;
      border-collapse: collapse;
    }

    th {
      padding: 10px;
      color: white;
      background: #2457a7;
      text-align: left;
    }

    td {
      padding: 10px;
      border-bottom: 1px solid #ddd;
    }

    .number {
      text-align: right;
    }

    .total {
      margin-top: 20px;
      font-size: 16px;
      font-weight: bold;
      text-align: right;
    }
  </style>
</head>
<body>
  <div class="invoice">
    <div class="header">
      <div>
        <h1>INVOICE</h1>
        <p>
          <strong>{{issuer_name}}</strong><br>
          {{issuer_address}}<br>
          {{issuer_email}}
        </p>
      </div>

      <div>
        <strong>Invoice:</strong> {{invoice_id}}<br>
        <strong>Date:</strong> {{invoice_date}}<br>
        <strong>Due:</strong> {{invoice_due}}
      </div>
    </div>

    <h2>Bill To</h2>
    <p>
      <strong>{{client_name}}</strong><br>
      {{client_address}}<br>
      {{client_email}}
    </p>

    <table>
      <thead>
        <tr>
          <th>Description</th>
          <th class="number">Price</th>
        </tr>
      </thead>
      <tbody>
        {{#each items}}
        <tr>
          <td>{{name}}</td>
          <td class="number">{{price}}</td>
        </tr>
        {{/each}}
      </tbody>
    </table>

    <div class="total">Total: {{total}}</div>

    {{#if paid}}
    <p><strong>PAID</strong></p>
    {{/if}}

    <p>{{note}}</p>
  </div>
</body>
</html>

Save the template.

PDF.co supports Mustache placeholders, nested data, conditions, and Handlebars loops such as {{#each items}}.

Step 2: Copy the Template ID

After saving the template, locate its numeric ID in the template list, details, or editing URL.

Copy the ID. It will be supplied as the request’s templateId.

Step 3: Create a Postman Request

Open Postman and create a new HTTP Request.

Configure it as follows:

Method: POST
URL: https://api.pdf.co/v1/pdf/convert/from/html

Add these headers:

x-api-key: Your PDF.co API key
Content-Type: application/json

The endpoint and its available settings are documented in the PDF from HTML Template API reference.

Step 4: Add the Invoice Data

Open the Body tab, select raw, and choose JSON.

Paste the following request body:

{
  "templateId": 123,
  "name": "invoice-0021.pdf",
  "paperSize": "Letter",
  "orientation": "Portrait",
  "margins": "20px",
  "printBackground": true,
  "mediaType": "print",
  "async": false,
  "templateData": "{\"invoice_id\":\"0021\",\"invoice_date\":\"September 4, 2026\",\"invoice_due\":\"October 4, 2026\",\"issuer_name\":\"Acme Services\",\"issuer_address\":\"123 Market Street, San Francisco, CA 94102\",\"issuer_email\":\"billing@example.com\",\"client_name\":\"Northwind Market\",\"client_address\":\"500 Main Street, Seattle, WA 98101\",\"client_email\":\"accounts@example.com\",\"items\":[{\"name\":\"Consulting Services\",\"price\":\"$1,000.00\"},{\"name\":\"Implementation\",\"price\":\"$500.00\"}],\"total\":\"$1,500.00\",\"paid\":true,\"note\":\"Thank you for your business.\"}"
}

Replace 123 with your template ID.

The property names inside templateData must match the placeholders in the HTML template. The API expects templateData to be a string containing serialized JSON.

Step 5: Generate the Invoice

Select Send in Postman.

A successful response resembles:

{
  "url": "https://pdf-temp-files.s3.amazonaws.com/.../invoice-0021.pdf",
  "pageCount": 1,
  "error": false,
  "status": 200,
  "name": "invoice-0021.pdf",
  "remainingCredits": 1000
}

Confirm that:

error is false.
status is 200.
url contains the generated PDF’s temporary location.

Step 6: Review the PDF

Open the returned URL and confirm that:

The invoice and customer details are correct.
Every line item appears in the table.
The total and payment status are correct.
Background colors and styling are visible.
No content is cut off by the page margins.

If necessary, edit the saved HTML template and send the request again.

Conclusion

You have created a reusable HTML invoice template and populated it through the PDF.co Web API using Postman. Generate additional invoices by reusing the request and changing the values inside templateData.

PDF.co output URLs are temporary, so download the finished invoice or transfer it to permanent storage before the link expires.