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
/* file: app.component.ts */
2
import { Component, ViewChild } from '@angular/core';
3
import { GridSettings, HotTableComponent } from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'app-example1',
7
  template: `
8
    <div class="example-controls-container">
9
      <div class="controls">
10
        <button (click)="exportFile()">Download CSV</button>
11
      </div>
12
    </div>
13

14
    <hot-table
15
      [settings]="hotSettings!" [data]="hotData">
16
    </hot-table>
17
  `,
18
  standalone: false
19
})
20
export class AppComponent {
21
  @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;
22

23
  readonly hotData = [
24
    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],
25
    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],
26
    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],
27
    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4'],
28
    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5'],
29
    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6'],
30
    ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7'],
31
  ];
32

33
  readonly hotSettings: GridSettings = {
34
    colHeaders: true,
35
    rowHeaders: true,
36
    hiddenRows: { rows: [1, 3, 5], indicators: true },
37
    hiddenColumns: { columns: [1, 3, 5], indicators: true },
38
    height: 'auto',
39
    autoWrapRow: true,
40
    autoWrapCol: true,
41
  };
42

43
  exportFile() {
44
    const exportPlugin = this.hotTable.hotInstance!.getPlugin('exportFile');
45

46
    exportPlugin.downloadFile('csv', {
47
      bom: false,
48
      columnDelimiter: ',',
49
      columnHeaders: false,
50
      exportHiddenColumns: true,
51
      exportHiddenRows: true,
52
      fileExtension: 'csv',
53
      filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',
54
      mimeType: 'text/csv',
55
      rowDelimiter: '\r\n',
56
      rowHeaders: true,
57
    });
58
  }
59
}
60
/* end-file */
61

62

63
/* file: app.module.ts */
64
import { NgModule, ApplicationConfig } from '@angular/core';
65
import { BrowserModule } from '@angular/platform-browser';
66
import { registerAllModules } from 'handsontable/registry';
67
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
68
import { CommonModule } from '@angular/common';
69
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
70

71
/* start:skip-in-compilation */
72
import { AppComponent } from './app.component';
73
/* end:skip-in-compilation */
74

75
// register Handsontable's modules
76
registerAllModules();
77

78
export const appConfig: ApplicationConfig = {
79
  providers: [
80
    {
81
      provide: HOT_GLOBAL_CONFIG,
82
      useValue: {
83
        license: NON_COMMERCIAL_LICENSE,
84
      } as HotGlobalConfig
85
    }
86
  ],
87
};
88

89
@NgModule({
90
  imports: [ BrowserModule, HotTableModule, CommonModule ],
91
  declarations: [ AppComponent ],
92
  providers: [...appConfig.providers],
93
  bootstrap: [ AppComponent ]
94
})
95

96
export class AppModule { }
97
/* end-file */

1
<div>
2
    <app-example1></app-example1>
3
</div>

Export as a JavaScript Blob object

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

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

5
@Component({
6
  selector: 'app-example2',
7
  template: `
8
    <div class="example-controls-container">
9
      <div class="controls">
10
        <button (click)="exportBlob()">Export as a Blob</button>
11
      </div>
12
    </div>
13

14
    <hot-table
15
      [settings]="hotSettings!" [data]="hotData">
16
    </hot-table>
17
  `,
18
  standalone: false
19
})
20
export class AppComponent {
21
  @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;
22

23
  readonly hotData = [
24
    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],
25
    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],
26
    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],
27
    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4'],
28
    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5'],
29
    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6'],
30
    ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7'],
31
  ];
32

33
  readonly hotSettings: GridSettings = {
34
    colHeaders: true,
35
    rowHeaders: true,
36
    hiddenRows: { rows: [1, 3, 5], indicators: true },
37
    hiddenColumns: { columns: [1, 3, 5], indicators: true },
38
    height: 'auto',
39
    autoWrapRow: true,
40
    autoWrapCol: true,
41
  };
42

43
  exportBlob() {
44
    const exportPlugin = this.hotTable.hotInstance!.getPlugin('exportFile');
45

46
    const exportedBlob = exportPlugin.exportAsBlob('csv', {
47
      bom: false,
48
      columnDelimiter: ',',
49
      columnHeaders: false,
50
      exportHiddenColumns: true,
51
      exportHiddenRows: true,
52
      mimeType: 'text/csv',
53
      rowDelimiter: '\r\n',
54
      rowHeaders: true,
55
    });
56

57
    console.log(exportedBlob);
58
  }
59
}
60
/* end-file */
61

62

63
/* file: app.module.ts */
64
import { NgModule, ApplicationConfig } from '@angular/core';
65
import { BrowserModule } from '@angular/platform-browser';
66
import { registerAllModules } from 'handsontable/registry';
67
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
68
import { CommonModule } from '@angular/common';
69
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
70

71
/* start:skip-in-compilation */
72
import { AppComponent } from './app.component';
73
/* end:skip-in-compilation */
74

75
// register Handsontable's modules
76
registerAllModules();
77

78
export const appConfig: ApplicationConfig = {
79
  providers: [
80
    {
81
      provide: HOT_GLOBAL_CONFIG,
82
      useValue: {
83
        license: NON_COMMERCIAL_LICENSE,
84
      } as HotGlobalConfig
85
    }
86
  ],
87
};
88

89
@NgModule({
90
  imports: [ BrowserModule, HotTableModule, CommonModule ],
91
  declarations: [ AppComponent ],
92
  providers: [...appConfig.providers],
93
  bootstrap: [ AppComponent ]
94
})
95

96
export class AppModule { }
97
/* end-file */

1
<div>
2
  <app-example2></app-example2>
3
</div>

Export as a string

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

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

5
@Component({
6
  selector: 'app-example3',
7
  template: `
8
    <div class="example-controls-container">
9
      <div class="controls">
10
        <button (click)="exportString()">Export as a string</button>
11
      </div>
12
    </div>
13

14
    <hot-table
15
      [settings]="hotSettings!" [data]="hotData">
16
    </hot-table>
17
  `,
18
  standalone: false
19
})
20
export class AppComponent {
21
  @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;
22

23
  readonly hotData = [
24
    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],
25
    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],
26
    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],
27
    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4'],
28
    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5'],
29
    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6'],
30
    ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7'],
31
  ];
32

33
  readonly hotSettings: GridSettings = {
34
    colHeaders: true,
35
    rowHeaders: true,
36
    hiddenRows: { rows: [1, 3, 5], indicators: true },
37
    hiddenColumns: { columns: [1, 3, 5], indicators: true },
38
    height: 'auto',
39
    autoWrapRow: true,
40
    autoWrapCol: true,
41
  };
42

43
  exportString() {
44
    const exportPlugin = this.hotTable.hotInstance!.getPlugin('exportFile');
45

46
    const exportedString = exportPlugin.exportAsString('csv', {
47
      bom: false,
48
      columnDelimiter: ',',
49
      columnHeaders: false,
50
      exportHiddenColumns: true,
51
      exportHiddenRows: true,
52
      rowDelimiter: '\r\n',
53
      rowHeaders: true,
54
    });
55

56
    console.log(exportedString);
57
  }
58
}
59
/* end-file */
60

61

62
/* file: app.module.ts */
63
import { NgModule, ApplicationConfig } from '@angular/core';
64
import { BrowserModule } from '@angular/platform-browser';
65
import { registerAllModules } from 'handsontable/registry';
66
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
67
import { CommonModule } from '@angular/common';
68
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
69

70
/* start:skip-in-compilation */
71
import { AppComponent } from './app.component';
72
/* end:skip-in-compilation */
73

74
// register Handsontable's modules
75
registerAllModules();
76

77
export const appConfig: ApplicationConfig = {
78
  providers: [
79
    {
80
      provide: HOT_GLOBAL_CONFIG,
81
      useValue: {
82
        license: NON_COMMERCIAL_LICENSE,
83
      } as HotGlobalConfig
84
    }
85
  ],
86
};
87

88
@NgModule({
89
  imports: [ BrowserModule, HotTableModule, CommonModule ],
90
  declarations: [ AppComponent ],
91
  providers: [...appConfig.providers],
92
  bootstrap: [ AppComponent ]
93
})
94

95
export class AppModule { }
96
/* end-file */

1
<div>
2
  <app-example3></app-example3>
3
</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
/* file: app.component.ts */
2
import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
3
import { GridSettings, HotTableComponent } from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'app-example4',
7
  template: `
8
    <div class="example-controls-container">
9
      <div class="controls">
10
        <button (click)="downloadCSVWithNoSanitization()">Download CSV with no sanitization</button>
11
        <button (click)="downloadCSVWithRecommendedSanitization()">Download CSV with recommended sanitization</button>
12
        <button (click)="downloadCSVWithRegexpSanitization()">Download CSV with sanitization using a regexp</button>
13
        <button (click)="downloadCSVWithFunctionSanitization()">Download CSV with sanitization using a function</button>
14
      </div>
15
    </div>
16

17
    <hot-table
18
      [settings]="hotSettings!" [data]="hotData">
19
    </hot-table>
20
  `,
21
  standalone: false,
22
  encapsulation: ViewEncapsulation.None
23
})
24
export class AppComponent {
25
  @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;
26

27
  readonly hotData = [
28
    ['https://handsontable.com', '=WEBSERVICE(A1)'],
29
    ['https://github.com', '=WEBSERVICE(A2)'],
30
    ['http://example.com/malicious-script.exe', '=WEBSERVICE(A3)'],
31
  ];
32

33
  readonly hotSettings: GridSettings = {
34
    colHeaders: true,
35
    rowHeaders: true,
36
    height: 'auto',
37
    autoWrapRow: true,
38
    autoWrapCol: true,
39
  };
40

41
  downloadCSVWithNoSanitization() {
42
    const exportPlugin = this.hotTable.hotInstance!.getPlugin('exportFile');
43

44
    exportPlugin.downloadFile('csv', {
45
      bom: false,
46
      columnDelimiter: ',',
47
      columnHeaders: false,
48
      exportHiddenColumns: true,
49
      exportHiddenRows: true,
50
      fileExtension: 'csv',
51
      filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',
52
      mimeType: 'text/csv',
53
      rowDelimiter: '\r\n',
54
    });
55
  }
56

57
  downloadCSVWithRecommendedSanitization() {
58
    const exportPlugin = this.hotTable.hotInstance!.getPlugin('exportFile');
59

60
    exportPlugin.downloadFile('csv', {
61
      bom: false,
62
      columnDelimiter: ',',
63
      columnHeaders: false,
64
      exportHiddenColumns: true,
65
      exportHiddenRows: true,
66
      fileExtension: 'csv',
67
      filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',
68
      mimeType: 'text/csv',
69
      rowDelimiter: '\r\n',
70
      sanitizeValues: true,
71
    });
72
  }
73

74
  downloadCSVWithNoSanitization() {
75
    const exportPlugin = this.hotTable.hotInstance!.getPlugin('exportFile');
76

77
    exportPlugin.downloadFile('csv', {
78
      bom: false,
79
      columnDelimiter: ',',
80
      columnHeaders: false,
81
      exportHiddenColumns: true,
82
      exportHiddenRows: true,
83
      fileExtension: 'csv',
84
      filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',
85
      mimeType: 'text/csv',
86
      rowDelimiter: '\r\n',
87
      sanitizeValues: /WEBSERVICE/,
88
    });
89
  }
90

91
  downloadCSVWithFunctionSanitization() {
92
    const exportPlugin = this.hotTable.hotInstance!.getPlugin('exportFile');
93

94
    exportPlugin.downloadFile('csv', {
95
      bom: false,
96
      columnDelimiter: ',',
97
      columnHeaders: false,
98
      exportHiddenColumns: true,
99
      exportHiddenRows: true,
100
      fileExtension: 'csv',
101
      filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',
102
      mimeType: 'text/csv',
103
      rowDelimiter: '\r\n',
104
      sanitizeValues: (value) => {
105
        return /WEBSERVICE/.test(value) ? 'REMOVED SUSPICIOUS CELL CONTENT' : value;
106
      },
107
    });
108
  }
109
}
110
/* end-file */
111

112

113
/* file: app.module.ts */
114
import { NgModule, ApplicationConfig } from '@angular/core';
115
import { BrowserModule } from '@angular/platform-browser';
116
import { registerAllModules } from 'handsontable/registry';
117
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
118
import { CommonModule } from '@angular/common';
119
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
120

121
/* start:skip-in-compilation */
122
import { AppComponent } from './app.component';
123
/* end:skip-in-compilation */
124

125
// register Handsontable's modules
126
registerAllModules();
127

128
export const appConfig: ApplicationConfig = {
129
  providers: [
130
    {
131
      provide: HOT_GLOBAL_CONFIG,
132
      useValue: {
133
        license: NON_COMMERCIAL_LICENSE,
134
      } as HotGlobalConfig
135
    }
136
  ],
137
};
138

139
@NgModule({
140
  imports: [ BrowserModule, HotTableModule, CommonModule ],
141
  declarations: [ AppComponent ],
142
  providers: [...appConfig.providers],
143
  bootstrap: [ AppComponent ]
144
})
145

146
export class AppModule { }
147
/* end-file */

1
<div>
2
    <app-example4></app-example4>
3
</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