pdfmake Invoice Example

by Alex

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>

<h1>pdfmake Example</h1>
<button onclick="generateInvoice()">Generate Invoice PDF</button>

<!-- Load pdfmake and default font support -->

JavaScript

function generateInvoice() {
  const docDefinition = {
    content: [
      { text: 'Invoice', style: 'header' },
      { text: 'Customer: Jane Smith', margin: [0, 10, 0, 10] },
      {
        table: {
          headerRows: 1,
          widths: ['*', 'auto', 'auto'],
          body: [
            ['Item', 'Qty', 'Price'],
            ['Widget A', '2', '$10.00'],
            ['Widget B', '1', '$22.00'],
            [{ text: 'Total', bold: true }, '', '$42.00'],
          ],
        },
      },
      { text: 'Thank you for your business!', margin: [0, 20, 0, 0] },
    ],
    styles: {
      header: { fontSize: 18, bold: true },
    },
  }

  pdfMake.createPdf(docDefinition).download('invoice.pdf')
}