We use cookies

We use cookies to enhance your experience and analyse site usage.

Back to Blog
Tutorial5 min read

Free HTML Invoice Template with PDF Export

A complete, production-ready HTML invoice template with inline CSS. Generate PDFs from it using the HTMLPDF.dev API — no configuration required.

The invoice template

Here's a complete, self-contained HTML invoice template with inline CSS that renders perfectly as a PDF. Copy it, customize the variables, and use it with the HTMLPDF.dev API.

<!DOCTYPE html>

<html>


<head>


<style>


  * { box-sizing: border-box; margin: 0; padding: 0; }


  body { font-family: -apple-system, sans-serif; color: #1e293b; padding: 48px; }


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


  .logo { font-size: 22px; font-weight: 700; color: #2563eb; }


  .invoice-meta { text-align: right; }


  .invoice-meta h1 { font-size: 28px; font-weight: 800; }


  .invoice-meta p { color: #64748b; font-size: 14px; margin-top: 4px; }


  table { width: 100%; border-collapse: collapse; margin-bottom: 24px; }


  thead { background: #f8fafc; }


  th { padding: 12px 16px; text-align: left; font-size: 11px;


       font-weight: 600; text-transform: uppercase; color: #64748b; }


  th:last-child, td:last-child { text-align: right; }


  td { padding: 14px 16px; border-bottom: 1px solid #e2e8f0; font-size: 14px; }


  .total { width: 240px; margin-left: auto; }


  .total .row { display: flex; justify-content: space-between;


                padding: 8px 0; font-size: 14px; color: #64748b; }


  .total .grand { border-top: 2px solid #e2e8f0; margin-top: 8px;


                  padding-top: 12px; font-weight: 700; font-size: 16px;


                  color: #2563eb; display: flex; justify-content: space-between; }


</style>


</head>


<body>


  <div class="header">


    <div>


      <div class="logo">Acme Corp</div>


      <p style="color:#64748b;font-size:13px;margin-top:4px;">


        123 Main St · San Francisco, CA 94107<br>[email protected]


      </p>


    </div>


    <div class="invoice-meta">


      <h1>Invoice</h1>


      <p>#INV-1042</p>


      <p>Due: April 30, 2026</p>


    </div>


  </div>



  <table>


    <thead>


      <tr><th>Description</th><th>Qty</th><th>Rate</th><th>Amount</th></tr>


    </thead>


    <tbody>


      <tr><td>API Development</td><td>40 hrs</td><td>$150</td><td>$6,000</td></tr>


      <tr><td>UI Design</td><td>20 hrs</td><td>$120</td><td>$2,400</td></tr>


      <tr><td>Project Management</td><td>10 hrs</td><td>$100</td><td>$1,000</td></tr>


    </tbody>


  </table>



  <div class="total">


    <div class="row"><span>Subtotal</span><span>$9,400</span></div>


    <div class="row"><span>Tax (5%)</span><span>$470</span></div>


    <div class="grand"><span>Total Due</span><span>$9,870</span></div>


  </div>


</body>


</html>

Generate the PDF

Once you have your HTML template ready (with real data substituted in), send it to the API:

import fs from 'fs'


const html = <!-- your invoice HTML here -->



const response = await fetch('https://api.htmlpdf.dev/api/pdf', {


  method: 'POST',


  headers: {


    'Authorization': 'Bearer YOUR_API_KEY',


    'Content-Type': 'application/json',


  },


  body: JSON.stringify({


    html,


    format: 'A4',


    margin: { top: '0.5in', bottom: '0.5in', left: '0.5in', right: '0.5in' },


    printBackground: true,


  }),


})



const pdf = await response.arrayBuffer()


fs.writeFileSync('invoice.pdf', Buffer.from(pdf))


console.log('Invoice saved to invoice.pdf')

Adding page numbers

For multi-page invoices, enable the footer with page numbers:

{

  html,


  format: 'A4',


  displayHeaderFooter: true,


  footerTemplate: <div style="font-size:10px;width:100%;text-align:center;color:#94a3b8;">


    Page <span class="pageNumber"></span> of <span class="totalPages"></span>


  </div>,


  margin: { top: '0.5in', bottom: '0.75in', left: '0.5in', right: '0.5in' },


}

More templates

We have 10 ready-to-use templates in the template gallery — invoices, receipts, reports, certificates, and letters. Each one is a complete HTML document with inline CSS, ready to drop in and customize.

Browse templates → · Get free API key →

Ready to get started?

Create a free account and generate your first PDF in under 2 minutes.

Get started free