jsPDF-AutoTable

Hooks allow you to intercept the rendering process to modify content or draw custom elements (like images) during specific lifecycle stages of the table generation.

// Example: Drawing an image in the first column of every body row
autoTable(doc, {
  didDrawCell: (data) => {
    if (data.section === 'body' && data.column.index === 0) {
      const base64Img = 'data:image/jpeg;base64,iVBORw0KGgoAAAANS...'
      doc.addImage(base64Img, 'JPEG', data.cell.x + 2, data.cell.y + 2, 10, 10)
    }
  },
})

Instead of calling the standalone autoTable function, you can attach the plugin methods directly to the jsPDF prototype using applyPlugin. This allows you to call doc.autoTable() on any instance.

import { jsPDF } from 'jspdf'
import { applyPlugin } from 'jspdf-autotable'

applyPlugin(jsPDF)

const doc = new jsPDF()
doc.autoTable({ html: '#my-table' })
doc.save('table.pdf')

You can view the plugin's capabilities through the following methods:

1. Hosted Examples: Visit the hosted examples page to see live demonstrations.
2. Local Examples: Open index.html at the repository root in your browser.
3. Basic Usage: For the simplest implementation pattern, refer to simple.html.
4. Source Code: The logic for all examples is contained within examples.js.

You can install jsPDF and the AutoTable plugin using npm, download them directly from GitHub, or use a CDN.

npm install jspdf jspdf-autotable

jsPDF-AutoTable allows you to generate tables in two primary ways: by parsing an existing HTML table via a CSS selector or by providing JavaScript data directly (head, body, and foot).

import { jsPDF } from 'jspdf'
import { autoTable } from 'jspdf-autotable'

const doc = new jsPDF()

// Option 1: Parse HTML
// <table id="my-table">...</table>
autoTable(doc, { html: '#my-table' })

// Option 2: Use JavaScript data
autoTable(doc, {
  head: [['Name', 'Email', 'Country']],
  body: [
    ['David', 'david@example.com', 'Sweden'],
    ['Castille', 'castille@example.com', 'Spain'],
  ],
})

doc.save('table.pdf')

The plugin supports common module bundlers including browserify, webpack, and requirejs.

To use these examples locally:

• For webpack and browserify examples, you must run npm install first.
• Open the respective index.html file for the bundler you wish to test; they are configured to work out of the box.

Compatibility Note: Ensure you are using a modern version of jsPDF. Versions prior to jsPDF 1.3 may not work correctly with module bundlers.

jsPDF-AutoTable uses a hierarchical configuration system. Options can be defined at three levels: Global (jsPDF document level), Document (jsPDF-AutoTable document level), and Current (the specific table being generated).

When generating a table, the plugin merges these levels using a priority order where the Current options override Document options, which in turn override Global options. This applies to settings, styles, and hooks.

Hooks in jsPDF-AutoTable are additive. Instead of a single hook overriding another, the plugin collects all hooks defined at the Global, Document, and Current levels and executes them in sequence.

Supported hook types include:

• didParseCell
• willDrawCell
• didDrawCell
• willDrawPage
• didDrawPage

The HookProps interface allows you to register callback functions (hooks) that trigger at specific stages of the table generation process. Hooks can be used to modify cell content, styles, or page behavior.

Cell Hooks

These hooks provide access to CellHookData (containing the document, table, cell, row, column, and cursor):

• didParseCell: Triggered after a cell is parsed.
• willDrawCell: Triggered before a cell is drawn.
• didDrawCell: Triggered after a cell is drawn.

Page Hooks

These hooks provide access to HookData (containing the document, table, and cursor):

• willDrawPage: Triggered before a page is drawn.
• didDrawPage: Triggered after a page is drawn.

Note: Returning false from a hook can stop the execution of subsequent handlers in that sequence.

Control the layout positioning of the table:

• margin: Defines the page margins. Supports spacing syntax.
• startY: Defines the vertical starting position of the table.
  • If a number is provided, the table starts at that Y coordinate.
  • If false or undefined, the plugin attempts to place the table after the previous table (if one exists) or at the top margin.