jsPDF Invoice Generator with Live PDF Preview — Free JavaScript Snippet

<div class="jiv">
  <form class="jiv-form" id="jivForm" autocomplete="off">
    <h2>Invoice</h2>
    <div class="jiv-row">
      <label>Invoice no. <input name="no" value="INV-2026-0142"></label>
      <label>Date <input name="date" type="date" value="2026-09-25"></label>
    </div>
    <div class="jiv-row">
      <label>From <textarea name="from" rows="3">Northwind Studio
12 Harbour Street
Bristol BS1 4ZZ</textarea></label>
      <label>Bill to <textarea name="to" rows="3">Parcelly Ltd
Attn: Accounts
Leeds LS1 2AB</textarea></label>
    </div>
    <div class="jiv-items">
      <div class="jiv-ihead"><span>Description</span><span>Qty</span><span>Rate</span><span></span></div>
      <div id="jivItems"></div>
      <button type="button" id="jivAdd" class="jiv-link">+ Add line</button>
    </div>
    <div class="jiv-row">
      <label>Currency <select name="cur"><option value="$">USD $</option><option value="£">GBP £</option><option value="€">EUR €</option></select></label>
      <label>Tax % <input name="tax" type="number" min="0" max="50" step="0.5" value="20"></label>
    </div>
    <div class="jiv-actions">
      <button type="button" id="jivDownload">Download PDF</button>
      <span id="jivStatus" role="status"></span>
    </div>
  </form>
  <div class="jiv-preview">
    <div class="jiv-plabel">Live preview of the generated PDF <small id="jivSize"></small></div>
    <canvas id="jivCanvas" aria-label="Rendered invoice PDF"></canvas>
  </div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#eef2f7;color:#0f172a;min-height:100vh;padding:20px}
.jiv{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:860px){.jiv{grid-template-columns:1fr}}
.jiv-form{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:18px}
.jiv-form h2{font-size:17px;margin-bottom:10px}
.jiv-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.jiv label{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:700;color:#475569}
.jiv input,.jiv textarea,.jiv select{font:500 13px system-ui;color:#0f172a;border:1px solid #cbd5e1;border-radius:8px;padding:7px 9px;background:#fff;width:100%}
.jiv textarea{resize:vertical}
.jiv :focus-visible{outline:2px solid #6366f1;outline-offset:1px}
.jiv-items{border:1px solid #e2e8f0;border-radius:10px;padding:8px;margin-bottom:10px}
.jiv-ihead,.jiv-line{display:grid;grid-template-columns:1fr 60px 84px 28px;gap:6px;align-items:center}
.jiv-ihead{font-size:10.5px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.04em;padding:0 2px 4px}
.jiv-line{margin-bottom:6px}
.jiv-line button{border:0;background:#fee2e2;color:#b91c1c;border-radius:7px;height:30px;cursor:pointer;font-weight:800}
.jiv-link{border:0;background:none;color:#4f46e5;font:700 12px system-ui;cursor:pointer;padding:4px 2px}
.jiv-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
#jivDownload{border:0;border-radius:10px;background:#4f46e5;color:#fff;font:700 13px system-ui;padding:10px 16px;cursor:pointer}
#jivStatus{font-size:12px;color:#64748b}
.jiv-preview{background:#cbd5e1;border-radius:16px;padding:14px;position:sticky;top:12px}
.jiv-plabel{font-size:11px;font-weight:700;color:#334155;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;display:flex;justify-content:space-between}
.jiv-plabel small{font-weight:600;text-transform:none;letter-spacing:0}
#jivCanvas{width:100%;height:auto;display:block;background:#fff;box-shadow:0 8px 24px rgba(15,23,42,.18);border-radius:2px}

// PDF.js renders the preview. Inside a sandboxed preview it can't start a
// cross-origin worker, so it falls back to a "fake worker" on the main
// thread automatically; setting workerSrc tells it where that code lives.
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdn.jsdelivr.net/npm/[email protected]/build/pdf.worker.min.js';

var form = document.getElementById('jivForm');
var itemsEl = document.getElementById('jivItems');
var lines = [
  ['Brand identity refresh', 1, 2400],
  ['Landing page design (3 templates)', 3, 650],
  ['Developer handoff & QA', 6, 85],
];

function renderLines() {
  itemsEl.innerHTML = lines.map(function (l, i) {
    return '<div class="jiv-line"><input aria-label="Description" data-i="' + i + '" data-k="0" value="' + String(l[0]).replace(/"/g, '&quot;') + '">' +
      '<input aria-label="Quantity" type="number" min="0" step="1" data-i="' + i + '" data-k="1" value="' + l[1] + '">' +
      '<input aria-label="Rate" type="number" min="0" step="0.01" data-i="' + i + '" data-k="2" value="' + l[2] + '">' +
      '<button type="button" aria-label="Remove line" data-del="' + i + '">×</button></div>';
  }).join('');
}

function money(cur, v) { return cur + v.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); }

function build() {
  var f = new FormData(form);
  var cur = f.get('cur');
  var tax = Math.max(0, Number(f.get('tax')) || 0);
  var doc = new jspdf.jsPDF({ unit: 'mm', format: 'a4' });
  var W = doc.internal.pageSize.getWidth();

  // Header band
  doc.setFillColor(79, 70, 229);
  doc.rect(0, 0, W, 34, 'F');
  doc.setTextColor(255, 255, 255);
  doc.setFont('helvetica', 'bold');
  doc.setFontSize(22);
  doc.text('INVOICE', 16, 21);
  doc.setFontSize(10);
  doc.setFont('helvetica', 'normal');
  doc.text(String(f.get('no')), W - 16, 16, { align: 'right' });
  var d = f.get('date') ? new Date(f.get('date') + 'T00:00:00') : new Date();
  doc.text(d.toLocaleDateString('en-GB', { day: 'numeric', month: 'long', year: 'numeric' }), W - 16, 22, { align: 'right' });

  // Addresses. splitTextToSize wraps text to a width in the doc's units.
  doc.setTextColor(100, 116, 139);
  doc.setFontSize(8);
  doc.text('FROM', 16, 46);
  doc.text('BILL TO', W / 2 + 4, 46);
  doc.setTextColor(15, 23, 42);
  doc.setFontSize(10);
  doc.text(doc.splitTextToSize(String(f.get('from')), W / 2 - 24), 16, 52);
  doc.text(doc.splitTextToSize(String(f.get('to')), W / 2 - 24), W / 2 + 4, 52);

  var subtotal = 0;
  var body = lines.map(function (l) {
    var amount = (Number(l[1]) || 0) * (Number(l[2]) || 0);
    subtotal += amount;
    return [String(l[0]), String(l[1]), money(cur, Number(l[2]) || 0), money(cur, amount)];
  });
  var taxAmt = subtotal * tax / 100;

  // autoTable draws the table, handles row heights and page breaks, and
  // stores where it finished in doc.lastAutoTable.finalY.
  doc.autoTable({
    startY: 76,
    head: [['Description', 'Qty', 'Rate', 'Amount']],
    body: body,
    theme: 'grid',
    styles: { font: 'helvetica', fontSize: 10, cellPadding: 3, lineColor: [226, 232, 240], lineWidth: 0.2 },
    headStyles: { fillColor: [241, 245, 249], textColor: [51, 65, 85], fontStyle: 'bold' },
    columnStyles: { 1: { halign: 'right', cellWidth: 18 }, 2: { halign: 'right', cellWidth: 32 }, 3: { halign: 'right', cellWidth: 34 } },
    margin: { left: 16, right: 16 },
  });

  var y = doc.lastAutoTable.finalY + 8;
  var right = W - 16;
  function totalRow(label, value, bold) {
    doc.setFont('helvetica', bold ? 'bold' : 'normal');
    doc.setFontSize(bold ? 12 : 10);
    doc.text(label, right - 58, y);
    doc.text(value, right, y, { align: 'right' });
    y += bold ? 9 : 6;
  }
  totalRow('Subtotal', money(cur, subtotal));
  totalRow('Tax (' + tax + '%)', money(cur, taxAmt));
  doc.setDrawColor(203, 213, 225);
  doc.line(right - 58, y - 3, right, y - 3);
  y += 2;
  totalRow('Total due', money(cur, subtotal + taxAmt), true);

  doc.setFont('helvetica', 'normal');
  doc.setFontSize(9);
  doc.setTextColor(100, 116, 139);
  doc.text('Payment due within 14 days. Thank you for your business.', 16, doc.internal.pageSize.getHeight() - 16);
  return doc;
}

var canvas = document.getElementById('jivCanvas');
var renderToken = 0;
async function preview() {
  var token = ++renderToken;
  var bytes = build().output('arraybuffer');
  document.getElementById('jivSize').textContent = (bytes.byteLength / 1024).toFixed(1) + ' KB';
  // PDF.js TRANSFERS the buffer it is given to its worker, which detaches it.
  // Pass a copy if you still need the original bytes afterwards.
  var pdf = await pdfjsLib.getDocument({ data: new Uint8Array(bytes.slice(0)) }).promise;
  var page = await pdf.getPage(1);
  if (token !== renderToken) return; // a newer edit started; drop this one
  var scale = (canvas.clientWidth || 500) / page.getViewport({ scale: 1 }).width * (window.devicePixelRatio || 1);
  var vp = page.getViewport({ scale: scale });
  canvas.width = vp.width;
  canvas.height = vp.height;
  await page.render({ canvasContext: canvas.getContext('2d'), viewport: vp }).promise;
  pdf.destroy();
}

var timer;
function schedule() { clearTimeout(timer); timer = setTimeout(preview, 250); }

itemsEl.addEventListener('input', function (e) {
  var i = e.target.dataset.i, k = e.target.dataset.k;
  if (i === undefined) return;
  lines[i][k] = k === '0' ? e.target.value : Number(e.target.value);
  schedule();
});
itemsEl.addEventListener('click', function (e) {
  var del = e.target.dataset.del;
  if (del === undefined) return;
  lines.splice(Number(del), 1);
  renderLines();
  schedule();
});
document.getElementById('jivAdd').addEventListener('click', function () {
  lines.push(['New item', 1, 100]);
  renderLines();
  schedule();
  itemsEl.lastElementChild.querySelector('input').focus();
});
form.addEventListener('input', function (e) { if (!e.target.dataset.i) schedule(); });
form.addEventListener('change', schedule);

document.getElementById('jivDownload').addEventListener('click', function () {
  var name = String(new FormData(form).get('no') || 'invoice').replace(/[^a-z0-9-_]+/gi, '_') + '.pdf';
  build().save(name);
  // Sandboxed previews (like this page's live editor) block downloads.
  document.getElementById('jivStatus').textContent = 'Saving ' + name + ' — if nothing downloads, open the preview in its own tab.';
});

renderLines();
preview();