JavaScript Data Grid Export to CSV

Table of contents

• Overview
• Live examples
  • Export to file
  • Export as a JavaScript Blob object
  • Export as a string
• Available methods
  • format String
  • options Object
• Available options in the export configuration
  • bom Boolean
  • columnDelimiter String
  • columnHeaders Boolean
  • exportHiddenColumns Boolean
  • exportHiddenRows Boolean
  • fileExtension String
  • filename String
  • mimeType String
  • range Array
  • rowDelimiter String
  • rowHeaders Boolean
• Related API reference

Overview

The plugin allows you to export data from Handsontable into a CSV file.

Live examples

Export to file

const container = document.querySelector('#example1'); const button = document.querySelector('#export-file'); const hot = new Handsontable(container, { data: Handsontable.helper.createSpreadsheetData(7, 7), colHeaders: true, rowHeaders: true, hiddenRows: { rows: [1, 3, 5], indicators: true }, hiddenColumns: { columns: [1, 3, 5], indicators: true }, height: 'auto', licenseKey: 'non-commercial-and-evaluation' }); const exportPlugin = hot.getPlugin('exportFile'); button.addEventListener('click', () => { exportPlugin.downloadFile('csv', { bom: false, columnDelimiter: ',', columnHeaders: false, exportHiddenColumns: true, exportHiddenRows: true, fileExtension: 'csv', filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]', mimeType: 'text/csv', rowDelimiter: '\r\n', rowHeaders: true }); }); <script src="https://cdn.jsdelivr.net/npm/handsontable@12.1/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.1/dist/handsontable.full.min.css" /> <div id="example1"></div> <div class="controls"> <button id="export-file">Download CSV</button> </div>

const container = document.querySelector('#example1');
const button = document.querySelector('#export-file');

const hot = new Handsontable(container, {
  data: Handsontable.helper.createSpreadsheetData(7, 7),
  colHeaders: true,
  rowHeaders: true,
  hiddenRows: { rows: [1, 3, 5], indicators: true },
  hiddenColumns: { columns: [1, 3, 5], indicators: true },
  height: 'auto',
  licenseKey: 'non-commercial-and-evaluation'
});

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

button.addEventListener('click', () => {
  exportPlugin.downloadFile('csv', {
    bom: false,
    columnDelimiter: ',',
    columnHeaders: false,
    exportHiddenColumns: true,
    exportHiddenRows: true,
    fileExtension: 'csv',
    filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',
    mimeType: 'text/csv',
    rowDelimiter: '\r\n',
    rowHeaders: true
  });
});

<div id="example1"></div>

<div class="controls">
  <button id="export-file">Download CSV</button>
</div>

Export as a JavaScript Blob object

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

const container = document.querySelector('#example2'); const button = document.querySelector('#export-blob'); const hot = new Handsontable(container, { data: Handsontable.helper.createSpreadsheetData(7, 7), colHeaders: true, rowHeaders: true, hiddenRows: { rows: [1, 3, 5], indicators: true }, hiddenColumns: { columns: [1, 3, 5], indicators: true }, height: 'auto', licenseKey: 'non-commercial-and-evaluation' }); const exportPlugin = hot.getPlugin('exportFile'); button.addEventListener('click', () => { const exportedBlob = exportPlugin.exportAsBlob('csv', { bom: false, columnDelimiter: ',', columnHeaders: false, exportHiddenColumns: true, exportHiddenRows: true, mimeType: 'text/csv', rowDelimiter: '\r\n', rowHeaders: true }); console.log(exportedBlob); }); <script src="https://cdn.jsdelivr.net/npm/handsontable@12.1/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.1/dist/handsontable.full.min.css" /> <div id="example2"></div> <div class="controls"> <button id="export-blob">Export as a Blob</button> </div>

const container = document.querySelector('#example2');
const button = document.querySelector('#export-blob');

const hot = new Handsontable(container, {
  data: Handsontable.helper.createSpreadsheetData(7, 7),
  colHeaders: true,
  rowHeaders: true,
  hiddenRows: { rows: [1, 3, 5], indicators: true },
  hiddenColumns: { columns: [1, 3, 5], indicators: true },
  height: 'auto',
  licenseKey: 'non-commercial-and-evaluation'
});

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

button.addEventListener('click', () => {
  const exportedBlob = exportPlugin.exportAsBlob('csv', {
    bom: false,
    columnDelimiter: ',',
    columnHeaders: false,
    exportHiddenColumns: true,
    exportHiddenRows: true,
    mimeType: 'text/csv',
    rowDelimiter: '\r\n',
    rowHeaders: true
  });

  console.log(exportedBlob);
});

<div id="example2"></div>

<div class="controls">
  <button id="export-blob">Export as a Blob</button>
</div>

Export as a string

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

const container = document.querySelector('#example3'); const button = document.querySelector('#export-string'); const hot = new Handsontable(container, { data: Handsontable.helper.createSpreadsheetData(7, 7), colHeaders: true, rowHeaders: true, hiddenRows: { rows: [1, 3, 5], indicators: true }, hiddenColumns: { columns: [1, 3, 5], indicators: true }, height: 'auto', licenseKey: 'non-commercial-and-evaluation' }); const exportPlugin = hot.getPlugin('exportFile'); button.addEventListener('click', () => { const exportedString = exportPlugin.exportAsString('csv', { bom: false, columnDelimiter: ',', columnHeaders: false, exportHiddenColumns: true, exportHiddenRows: true, rowDelimiter: '\r\n', rowHeaders: true }); console.log(exportedString); }); <script src="https://cdn.jsdelivr.net/npm/handsontable@12.1/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.1/dist/handsontable.full.min.css" /> <div id="example3"></div> <div class="controls"> <button id="export-string">Export as a string</button> </div>

const container = document.querySelector('#example3');
const button = document.querySelector('#export-string');

const hot = new Handsontable(container, {
  data: Handsontable.helper.createSpreadsheetData(7, 7),
  colHeaders: true,
  rowHeaders: true,
  hiddenRows: { rows: [1, 3, 5], indicators: true },
  hiddenColumns: { columns: [1, 3, 5], indicators: true },
  height: 'auto',
  licenseKey: 'non-commercial-and-evaluation'
});

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

button.addEventListener('click', () => {
  const exportedString = exportPlugin.exportAsString('csv', {
    bom: false,
    columnDelimiter: ',',
    columnHeaders: false,
    exportHiddenColumns: true,
    exportHiddenRows: true,
    rowDelimiter: '\r\n',
    rowHeaders: true
  });

  console.log(exportedString);
});

<div id="example3"></div>

<div class="controls">
  <button id="export-string">Export as a string</button>
</div>

Available methods

The plugin exposes the following methods to export data.

• downloadFile(format, options) - allows you to generate a downloadable file, directly in your browser.
• exportAsBlob(format, options) - allows you to export a JavaScript Blob object.
• exportAsString(format, options) - allows you to export data as a string.

All of them accept the same arguments:

format String

This is required to prepare a predefined settings object. We currently allow for only 'csv' to be used.

options Object

This is an optional argument. It contains a set of supported options and extends the predefined CSV configuration. For the complete list of options that you can use, see available options.

Available options in the export configuration

Below you can find all supported options:

bom Boolean

Allows you to export data with a BOM signature.

Please note: This property will prepend content with the UTF-16BE BOM signature (FE FF). The browser will convert the signature to the UTF-8 value (EF BB BF) automatically.

You can use this property in all of the available methods.

Default value: true

columnDelimiter String

Allows you to define the columns delimiter.

You can use this property in all of the available methods.

Default value: ','

columnHeaders Boolean

When set to true, includes column headers in the exported data.

You can use this property in all of the available methods.

The columnHeaders option doesn't support the NestedHeaders plugin.

Default value: false

exportHiddenColumns Boolean

Allows you to export data from hidden columns.

You can use this property in all of the available methods.

Default value: false

exportHiddenRows Boolean

Allows you to export data from hidden rows.

You can use this property in all of the available methods.

Default value: false

fileExtension String

Allows you to define the file extension.

You can use this property in the downloadFile method.

Default value: 'csv'

filename String

Allows you to define the file name.

You can use predefined placeholders, which will be replaced by the date.

You can use this property in the downloadFile method.

Default value: 'Handsontable [YYYY]-[MM]-[DD]'

mimeType String

Allows you to define the MIME type.

You can use this property in the downloadFile and exportAsBlob methods.

Default value: 'text/csv'

range Array

Allows you to define a range of dataset to export. It's represented by an array of numeric, visual indexes [startRow, startColumn, endRow, endColumn].

You can use this property in all of the available methods.

Default value: 'text/csv'

rowDelimiter String

Allows you to define rows delimiter.

You can use this property in all of the available methods.

Default value: '\r\n'

rowHeaders Boolean

Allows you to export data with their row header.

You can use this property in all of the available methods.

Default value: false

Related API reference

• Plugins:
  • ExportFile