Generate an invoice PDF in the browser

export type InvoiceItem = { description: string; qty: number; price: number };
export type Invoice = { number: string; client: string; currency: string; items: InvoiceItem[]; notes?: string };

export async function downloadInvoicePdf(inv: Invoice) {
  const { jsPDF } = await import('jspdf'); // loaded only when the button is clicked
  const doc = new jsPDF({ unit: 'mm', format: 'a4' });
  const money = new Intl.NumberFormat('en', { style: 'currency', currency: inv.currency });
  const left = 15;
  const right = 195;
  const bottom = 270;

  doc.setFontSize(20).text('Invoice', left, 22);
  doc.setFontSize(10).setTextColor(100);
  doc.text(`No. ${inv.number}`, right, 18, { align: 'right' });
  doc.text(new Date().toLocaleDateString('en'), right, 24, { align: 'right' });
  doc.setTextColor(0).text(`Bill to: ${inv.client}`, left, 36);

  let y = 50;
  const heading = () => {
    doc.setFont('helvetica', 'bold').setFontSize(10);
    doc.text('Description', left, y);
    doc.text('Qty', 120, y, { align: 'right' });
    doc.text('Price', 150, y, { align: 'right' });
    doc.text('Amount', right, y, { align: 'right' });
    doc.line(left, y + 2, right, y + 2);
    doc.setFont('helvetica', 'normal');
    y += 8;
  };
  heading();

  let totalCents = 0;
  for (const item of inv.items) {
    const lines: string[] = doc.splitTextToSize(item.description, 90);
    const rowH = lines.length * 5 + 2;
    if (y + rowH > bottom) {
      doc.addPage(); // continue the table on a new page
      y = 20;
      heading();
    }
    const cents = Math.round(item.qty * item.price * 100);
    totalCents += cents;
    doc.text(lines, left, y);
    doc.text(String(item.qty), 120, y, { align: 'right' });
    doc.text(money.format(item.price), 150, y, { align: 'right' });
    doc.text(money.format(cents / 100), right, y, { align: 'right' });
    y += rowH;
  }

  if (y + 20 > bottom) {
    doc.addPage();
    y = 20;
  }
  doc.line(130, y, right, y);
  doc.setFont('helvetica', 'bold').setFontSize(12);
  doc.text(`Total ${money.format(totalCents / 100)}`, right, y + 8, { align: 'right' });
  if (inv.notes) doc.setFont('helvetica', 'normal').setFontSize(9).text(doc.splitTextToSize(inv.notes, 120), left, y + 8);

  doc.save(`${inv.number}.pdf`);
}