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.

Prerequisites

• You configured Handsontable in your project.
• You registered the ExportFile plugin (the examples use registerAllModules()).

Examples

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

Examples 1-3 use hidden rows and hidden columns with indicators turned on. The indicators show where hidden data exists in the grid, and each example explains whether the export includes or skips that hidden data.

Export to file

This example exports all rows and columns, including hidden ones, by setting both exportHiddenRows and exportHiddenColumns to true.

Source code

Vue

<script setup lang="ts">
import { ref, useTemplateRef } from 'vue';
import { HotTable } from '@handsontable/vue3';
import { registerAllModules } from 'handsontable/registry';
import type { GridSettings } from 'handsontable/settings';

registerAllModules();

const hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');

const gridData = [
  ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],
  ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],
  ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],
  ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],
  ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],
  ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],
  ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],
];

const hotSettings = ref<GridSettings>({
  data: gridData,
  colHeaders: true,
  rowHeaders: true,
  hiddenRows: { rows: [1, 3, 5], indicators: true },
  hiddenColumns: { columns: [1, 3, 5], indicators: true },
  height: 'auto',
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});

function downloadCsv(): void {
  const exportPlugin = hotRef.value?.hotInstance?.getPlugin('exportFile');

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

<template>
  <div id="example1">
    <div class="example-controls-container">
      <div class="controls">
        <button id="export-file" type="button" @click="downloadCsv">
          Download CSV
        </button>
      </div>
    </div>
    <HotTable ref="hotRef" :settings="hotSettings" />
  </div>
</template>

Export as a JavaScript Blob object

Open a console in browser developer tools to see the result for the below example. This example keeps hidden indicators in the grid, but exports only visible rows and columns by setting exportHiddenRows and exportHiddenColumns to false.

Source code

Vue

<script setup lang="ts">
import { ref, useTemplateRef } from 'vue';
import { HotTable } from '@handsontable/vue3';
import { registerAllModules } from 'handsontable/registry';
import type { GridSettings } from 'handsontable/settings';

registerAllModules();

const hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');

const gridData = [
  ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],
  ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],
  ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],
  ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],
  ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],
  ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],
  ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],
];

const hotSettings = ref<GridSettings>({
  data: gridData,
  colHeaders: true,
  rowHeaders: true,
  hiddenRows: { rows: [1, 3, 5], indicators: true },
  hiddenColumns: { columns: [1, 3, 5], indicators: true },
  height: 'auto',
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});

function exportBlob(): void {
  const exportPlugin = hotRef.value?.hotInstance?.getPlugin('exportFile');
  const exportedBlob = exportPlugin?.exportAsBlob('csv', {
    bom: false,
    columnDelimiter: ',',
    colHeaders: false,
    exportHiddenColumns: false,
    exportHiddenRows: false,
    mimeType: 'text/csv',
    rowDelimiter: '\r\n',
    rowHeaders: true,
  });

  console.log(exportedBlob);
}
</script>

<template>
  <div id="example2">
    <div class="example-controls-container">
      <div class="controls">
        <button id="export-blob" type="button" @click="exportBlob">
          Export as a Blob
        </button>
      </div>
    </div>
    <HotTable ref="hotRef" :settings="hotSettings" />
  </div>
</template>

Export as a string

Open a console in browser developer tools to see the result for the below example. Like the Blob example, this export uses only visible data and skips hidden rows and columns.

Source code

Vue

<script setup lang="ts">
import { ref, useTemplateRef } from 'vue';
import { HotTable } from '@handsontable/vue3';
import { registerAllModules } from 'handsontable/registry';
import type { GridSettings } from 'handsontable/settings';

registerAllModules();

const hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');

const gridData = [
  ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],
  ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],
  ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],
  ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],
  ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],
  ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],
  ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],
];

const hotSettings = ref<GridSettings>({
  data: gridData,
  colHeaders: true,
  rowHeaders: true,
  hiddenRows: { rows: [1, 3, 5], indicators: true },
  hiddenColumns: { columns: [1, 3, 5], indicators: true },
  height: 'auto',
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});

function exportString(): void {
  const exportPlugin = hotRef.value?.hotInstance?.getPlugin('exportFile');
  const exportedString = exportPlugin?.exportAsString('csv', {
    bom: false,
    columnDelimiter: ',',
    colHeaders: false,
    exportHiddenColumns: false,
    exportHiddenRows: false,
    rowDelimiter: '\r\n',
    rowHeaders: true,
  });

  console.log(exportedString);
}
</script>

<template>
  <div id="example3">
    <div class="example-controls-container">
      <div class="controls">
        <button id="export-string" type="button" @click="exportString">
          Export as a string
        </button>
      </div>
    </div>
    <HotTable ref="hotRef" :settings="hotSettings" />
  </div>
</template>

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.

Source code

Vue

<script setup lang="ts">
import { ref, useTemplateRef } from 'vue';
import { HotTable } from '@handsontable/vue3';
import { registerAllModules } from 'handsontable/registry';
import type { GridSettings } from 'handsontable/settings';

registerAllModules();

const hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');

const hotSettings = ref<GridSettings>({
  data: [
    ['https://api.acme-inventory.com/live-stock', '=WEBSERVICE("https://api.acme-inventory.com/live-stock")'],
    ['https://status.vertex-logistics.com/feed', '=WEBSERVICE("https://status.vertex-logistics.com/feed")'],
    ['http://malicious.example/payload.exe', '=CMD("| calc.exe")'],
    ['https://news.example.com/q2-briefing', '=HYPERLINK("http://malicious.example","Open report")'],
    ['https://cdn.example.com/daily.csv', '+SUM(1,1)'],
  ],
  colHeaders: true,
  rowHeaders: true,
  height: 'auto',
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});

const csvExportOptions = {
  bom: false,
  columnDelimiter: ',',
  colHeaders: false,
  exportHiddenColumns: true,
  exportHiddenRows: true,
  fileExtension: 'csv',
  filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',
  mimeType: 'text/csv',
  rowDelimiter: '\r\n',
} as const;

function downloadWithNoSanitization(): void {
  hotRef.value?.hotInstance?.getPlugin('exportFile')?.downloadFile('csv', { ...csvExportOptions });
}

function downloadWithRecommendedSanitization(): void {
  hotRef.value?.hotInstance?.getPlugin('exportFile')?.downloadFile('csv', {
    ...csvExportOptions,
    sanitizeValues: true,
  });
}

function downloadWithRegexpSanitization(): void {
  hotRef.value?.hotInstance?.getPlugin('exportFile')?.downloadFile('csv', {
    ...csvExportOptions,
    sanitizeValues: /WEBSERVICE|CMD|HYPERLINK|^\+/,
  });
}

function downloadWithFunctionSanitization(): void {
  hotRef.value?.hotInstance?.getPlugin('exportFile')?.downloadFile('csv', {
    ...csvExportOptions,
    sanitizeValues: (value: string) => {
      return /WEBSERVICE|CMD|HYPERLINK|^\+/.test(value) ? 'REMOVED SUSPICIOUS CELL CONTENT' : value;
    },
  });
}
</script>

<template>
  <div id="example4">
    <div class="example-controls-container">
      <div class="controls">
        <button type="button" @click="downloadWithNoSanitization">
          Download CSV with no sanitization
        </button>
        <button type="button" @click="downloadWithRecommendedSanitization">
          Download CSV with recommended sanitization
        </button>
        <button type="button" @click="downloadWithRegexpSanitization">
          Download CSV with sanitization using a regexp
        </button>
        <button type="button" @click="downloadWithFunctionSanitization">
          Download CSV with sanitization using a function
        </button>
      </div>
    </div>
    <HotTable ref="hotRef" :settings="hotSettings" />
  </div>
</template>

Result

After completing this guide, you can export grid data as a downloadable CSV file, a JavaScript Blob, or a string. You can customize delimiters, ranges, headers, and value sanitization through the export configuration.

Available methods

Tip

To use the Handsontable API, you'll need access to the Handsontable instance. You can do that by utilizing a reference to the HotTable component, and reading its hotInstance property.

For more information, see the Instance methods page.

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.
colHeaders	Boolean, default false	Include column headers. Does not support the NestedHeaders plugin.
columnDelimiter	String, default ','	Column delimiter.
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.

Related blog articles

Handsontable 15.3.0: CSV sanitization, accessibility updates, and 30+ fixes→

Related API reference

Plugins

ExportFile→