Generate Invoice PDF in Browser: Pure JS Tutorial

Generating invoices and exporting PDFs is one of the most common needs in business software. Traditional approaches require a Java/PHP backend renderer or a headless browser — heavy, slow, and expensive. This tutorial shows a pure frontend approach: use dompdf.js to generate invoice PDFs directly in the browser with zero backend dependencies.

Why Generate PDFs Client-Side?

Invoice use cases share common pain points: dynamic content (customer info, amounts, line items), fixed layout (table headers, borders, pagination), and frequent batch exports.

Pure frontend advantages: no server resources consumed, no backend render queue to wait for, instant PDF generation and download, and offline support.

dompdf.js uses a Rust+WASM core that parses the DOM directly in the browser to produce vector PDFs — searchable text, crisp at any zoom level.

Code Example

import { DomPDF } from 'dompdf.js';

const invoiceHTML = `
  <h1 style="text-align:center">Tax Invoice</h1>
  <table style="width:100%;border-collapse:collapse">
    <tr><th style="border:1px solid #000;padding:8px">Item</th>
        <th style="border:1px solid #000;padding:8px">Amount</th></tr>
    <tr><td style="border:1px solid #000;padding:8px">Development</td>
        <td style="border:1px solid #000;padding:8px">$1,200.00</td></tr>
  </table>`;

const pdf = new DomPDF();
pdf.addPage(invoiceHTML, { format: 'A4' });
pdf.save('invoice.pdf');

Key Capabilities

Tables & borders: full table rendering with precise invoice layout preservation.

Auto pagination: long item lists paginate automatically with repeating headers.

CJK fonts: Source Han Sans SC built in — no font configuration needed.

Batch export: loop addPage() to generate multi-page invoice books.

FAQ

Q: Is the text in the generated PDF selectable? A: Yes — dompdf.js outputs vector text, not images, so text is searchable and copyable.

Q: Do I need a server? A: No. Everything runs in the browser.

Q: Does it work with Vue/React? A: Yes — call it from any frontend framework.