Export to PDF

In this tutorial, you will export grid data to a downloadable PDF using jsPDF and jspdf-autotable. You will learn how to read the current grid state with getData() and getColHeader(), build a multi-page PDF table with headers, and trigger a browser download.

1
/* file: app.component.ts */
2
import { Component, ViewChild } from '@angular/core';
3
import { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';
4
import { jsPDF } from 'jspdf';
5
import { autoTable } from 'jspdf-autotable';
6

7
/* start:skip-in-preview */
8
const ROWS = 85;
9
const data = Array.from({ length: ROWS }, (_, row) => [
10
  `SKU-${1000 + row}`,
11
  `Product ${row + 1}`,
12
  row % 12 + 1,
13
  (9.99 + row * 0.25).toFixed(2),
14
  ((row % 12 + 1) * (9.99 + row * 0.25)).toFixed(2),
15
]);
16
/* end:skip-in-preview */
17

18
@Component({
19
  standalone: true,
20
  imports: [HotTableModule],
21
  selector: 'example1-export-to-pdf',
22
  template: `
23
    <div class="example-controls-container">
24
      <div class="controls">
25
        <button type="button" (click)="exportToPdf()">Export to PDF</button>
26
      </div>
27
    </div>
28
    <hot-table [data]="data" [settings]="gridSettings"></hot-table>
29
  `,
30
})
31
export class AppComponent {
32
  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;
33

34
  readonly data = data;
35

36
  readonly gridSettings: GridSettings = {
37
    colHeaders: ['SKU', 'Product', 'Qty', 'Unit price', 'Line total'],
38
    columnSorting: true,
39
    rowHeaders: true,
40
    height: 320,
41
    width: '100%',
42
  };
43

44
  exportToPdf(): void {
45
    const hot = this.hotTable?.hotInstance;
46

47
    if (!hot) {
48
      return;
49
    }
50

51
    const body = hot.getData();
52
    const colCount = hot.countCols();
53
    const head = [
54
      Array.from({ length: colCount }, (_, col) => String(hot.getColHeader(col))),
55
    ];
56

57
    const doc = new jsPDF({ orientation: 'portrait', unit: 'mm', format: 'a4' });
58

59
    autoTable(doc, {
60
      head,
61
      body,
62
      styles: { fontSize: 8, cellPadding: 1.5, overflow: 'linebreak' },
63
      headStyles: {
64
        fillColor: [26, 66, 232],
65
        textColor: 255,
66
        fontStyle: 'bold',
67
      },
68
      alternateRowStyles: { fillColor: [245, 247, 250] },
69
      margin: { top: 14, left: 12, right: 12, bottom: 14 },
70
      showHead: 'everyPage',
71
    });
72

73
    doc.save('export.pdf');
74
  }
75
}
76
/* end-file */
77

78
/* file: app.config.ts */
79
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
80
import { registerAllModules } from 'handsontable/registry';
81
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
82

83
registerAllModules();
84

85
export const appConfig: ApplicationConfig = {
86
  providers: [
87
    provideZoneChangeDetection({ eventCoalescing: true }),
88
    {
89
      provide: HOT_GLOBAL_CONFIG,
90
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
91
    },
92
  ],
93
};
94
/* end-file */

1
<div><example1-export-to-pdf></example1-export-to-pdf></div>

Overview

This recipe shows how to export the current Handsontable data to a PDF file when the user clicks Export to PDF. The recommended approach is jsPDF with jspdf-autotable, which builds a real PDF table from your data so text stays selectable and accessible.

Difficulty: Beginner Time: ~20 minutes Libraries: jsPDF, jspdf-autotable (via CDN or npm)

What You’ll Build

A button above a Handsontable grid that:

Reads all rows and columns from the live grid (including any sorting the user applied)
Builds a multi-page A4 PDF with column headers repeated on every page
Alternates row background colors for readability
Triggers a browser download when clicked

Prerequisites

1
npm install jspdf jspdf-autotable

Import the libraries

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3
import { jsPDF } from 'jspdf';
4
import { autoTable } from 'jspdf-autotable';
5

6
registerAllModules();

TypeScript:

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3
import { jsPDF } from 'jspdf';
4
import { autoTable } from 'jspdf-autotable';
5

6
registerAllModules();

What’s happening:

handsontable/base is the tree-shakeable entry point — it loads only what you register
registerAllModules() registers every built-in plugin and cell type; scope this down if bundle size matters
jsPDF is the PDF document constructor
autoTable is the plugin function that draws a formatted table into the document

Set up Handsontable
```
1
const container = document.querySelector('#example1');
2

3
const hot = new Handsontable(container, {
4
  data,
5
  colHeaders: ['SKU', 'Product', 'Qty', 'Unit price', 'Line total'],
6
  columnSorting: true,
7
  rowHeaders: true,
8
  height: 320,
9
  width: '100%',
10
  licenseKey: 'non-commercial-and-evaluation',
11
});
```
TypeScript: Use document.querySelector('#example1')! (non-null assertion) and type the options as Handsontable.GridSettings.

Key points:
- colHeaders defines the visible column labels — you’ll read these back in Step 4 to build the PDF header row
- columnSorting: true lets users reorder rows before exporting; hot.getData() always returns the current visual order
- height: 320 constrains the on-screen grid; it has no effect on how many rows are written to the PDF
Read the grid data
```
1
function exportGridToPdf() {
2
  const body = hot.getData();
3
  // ...
4
}
```
What’s happening:
- hot.getData() returns a 2D array of all cell values in the current visual order
- If the user sorted column A descending, the rows in body match what they see on screen — the export reflects the current view, not the original data order
- Each inner array is one row: ['SKU-1000', 'Product 1', 1, '9.99', '9.99']
Build the column headers
```
1
const colCount = hot.countCols();
2
const head = [
3
  Array.from({ length: colCount }, (_, col) => String(hot.getColHeader(col))),
4
];
```
What’s happening:
- hot.countCols() returns the number of visible columns
- hot.getColHeader(col) returns the header label for each column index — this matches the colHeaders array you set in Step 2
- The result is wrapped in an outer array because autoTable expects head to be an array of rows (you could pass multiple header rows for grouped headers)
- String(...) converts numeric auto-generated headers (e.g., 1, 2, 3) to strings
Why read headers from the grid instead of hardcoding them?

Reading from hot.getColHeader() means the PDF header stays in sync with the grid automatically — rename a column header in one place and the export picks it up without a separate update.

Create the PDF document

1
const doc = new jsPDF({ orientation: 'portrait', unit: 'mm', format: 'a4' });

Options:

Option	Value	Effect
`orientation`	`'portrait'`	Page is taller than it is wide
`unit`	`'mm'`	All measurements (margins, padding) are in millimeters
`format`	`'a4'`	Standard A4 page (210 x 297 mm)

Alternatives:

1
// Landscape for wide tables
2
new jsPDF({ orientation: 'landscape', unit: 'mm', format: 'a4' })
3

4
// US Letter size
5
new jsPDF({ orientation: 'portrait', unit: 'mm', format: 'letter' })

Generate the table with autoTable
```
1
autoTable(doc, {
2
  head,
3
  body,
4
  styles: { fontSize: 8, cellPadding: 1.5, overflow: 'linebreak' },
5
  headStyles: {
6
    fillColor: [26, 66, 232],
7
    textColor: 255,
8
    fontStyle: 'bold',
9
  },
10
  alternateRowStyles: { fillColor: [245, 247, 250] },
11
  margin: { top: 14, left: 12, right: 12, bottom: 14 },
12
  showHead: 'everyPage',
13
});
```
What each option does:
- head — the header row built in Step 4; rendered with headStyles
- body — the 2D data array from Step 3; one inner array per row
- styles — applied to every cell:
  - fontSize: 8 — 8 pt fits more columns on A4 without wrapping
  - cellPadding: 1.5 — 1.5 mm padding keeps rows compact
  - overflow: 'linebreak' — long text wraps to the next line instead of being clipped
- headStyles — overrides styles for header cells only:
  - fillColor: [26, 66, 232] — RGB blue background
  - textColor: 255 — white text (shorthand for [255, 255, 255])
  - fontStyle: 'bold' — bold header text
- alternateRowStyles — applies to every other body row; the light gray ([245, 247, 250]) makes long tables easier to read
- margin — page margins in mm; gives breathing room around the table on all four sides
- showHead: 'everyPage' — repeats the header row at the top of each new page when the table spans multiple pages
Pagination:

autoTable handles page breaks automatically. When body has more rows than fit on one page, it starts a new page and — because showHead: 'everyPage' is set — prints the header row again at the top.
Save the PDF file
```
1
doc.save('export.pdf');
```
What’s happening:
- doc.save() serializes the PDF and triggers a browser download
- Pass any filename you want; the .pdf extension is required for browsers to open it correctly
- This is a client-side download — no server involved
Alternative — open in a new tab instead of downloading:
```
1
const blob = doc.output('blob');
2
const url = URL.createObjectURL(blob);
3

4
window.open(url, '_blank');
```
Wire the Export to PDF button
```
1
document.querySelector('#exportPdfBtn').addEventListener('click', exportGridToPdf);
```
TypeScript: Use document.querySelector('#exportPdfBtn')! to satisfy the null check.

What’s happening:
- #exportPdfBtn matches the button in the HTML file (see Step 9)
- Every click calls exportGridToPdf(), which always reads the current grid state — sorts, filters, or edits made since the last export are included automatically

Add the button and style it

Add a toolbar above the grid container in your HTML:

1
<div class="export-pdf-toolbar">
2
  <button type="button" id="exportPdfBtn" class="export-pdf-btn">Export to PDF</button>
3
</div>
4
<div id="example1"></div>

Style the button with CSS:

1
.export-pdf-toolbar {
2
  margin-bottom: 12px;
3
}
4

5
.export-pdf-btn {
6
  background: #1a42e8;
7
  border: none;
8
  border-radius: 6px;
9
  color: #fff;
10
  cursor: pointer;
11
  font-size: 14px;
12
  font-weight: 600;
13
  padding: 8px 16px;
14
}
15

16
.export-pdf-btn:hover {
17
  background: #1536c4;
18
}

What’s happening:

The button sits in its own div so you can add more toolbar items later without changing the layout
The button id must match the selector used in Step 8 (#exportPdfBtn)
The grid container id must match the selector used in Step 2 (#example1)
The hover color (#1536c4) is a slightly darker shade of the button background to give visual feedback

How it works — complete flow

Page loads — Handsontable renders the grid with 85 rows of sample data
User sorts (optional) — clicking a column header reorders rows; the export will reflect the new order
User clicks Export to PDF — the click event calls exportGridToPdf()
Read the grid — hot.getData() returns all rows in current visual order; hot.getColHeader() returns header labels
Build the PDF — a new jsPDF document is created with A4 portrait settings
Draw the table — autoTable lays out headers and body rows, wraps text, alternates row colors, and adds new pages as needed
Download — doc.save('export.pdf') triggers a browser download of the finished PDF

CDN scripts (no bundler)

If you load Handsontable from a CDN, add jsPDF and the AutoTable plugin after Handsontable:

1
<script src="https://cdn.jsdelivr.net/npm/jspdf@3.0.4/dist/jspdf.umd.min.js"></script>
2
<script src="https://cdn.jsdelivr.net/npm/jspdf-autotable@5.0.7/dist/jspdf.plugin.autotable.min.js"></script>

Then use the global jspdf.jsPDF constructor and call autoTable(doc, options) the same way as in the example (the plugin registers autoTable on the UMD build).

Alternative - html2canvas

You can capture the grid DOM with html2canvas and add the resulting image to a PDF with jsPDF. That path mirrors what users see on screen (merged cells, custom renderers, styling) but produces a raster snapshot — file size grows with resolution, text is not selectable, and accessibility is weaker than a table built from data.

What you learned

How to read grid data with hot.getData() and column headers with hot.getColHeader() to pass them to jsPDF AutoTable.
How AutoTable handles row wrapping, alternating row colors, and page breaks automatically so you can generate multi-page PDFs from a single call.
How to use doc.save('filename.pdf') to trigger a browser download of the finished PDF.
How to load jsPDF and AutoTable via CDN for environments without a bundler.

Next steps

Explore Import from CSV or Excel to add the complementary import flow alongside your export feature.
Explore the ExportFile plugin for built-in Excel export support without a third-party library.

Export to PDF

Overview

What You’ll Build

Prerequisites

Import the libraries

Set up Handsontable

Read the grid data

Build the column headers