All docs
V24.2
24.2
24.1
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.

JavaScript/jQuery PivotGrid - Export

You can export PivotGrid data to Excel. Follow the steps outlined in this help topic to complete the process. For PivotGrid export demos, see:

View Demo

Install Dependencies

To export PivotGrid data to Excel, you first need to install the following third-party libraries:

index.html
  • <html>
  • <head>
  • <!-- ... -->
  • <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.0/polyfill.min.js"></script>
  • <script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.4.0/exceljs.min.js"></script>
  • <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.2/FileSaver.min.js"></script>
  •  
  • <!-- DevExtreme scripts are referenced here -->
  • <!-- ... -->
  • </head>
  • </html>
IMPORTANT
For details about potential vulnerabilities when using an older ExcelJS version and applying CSP rules, refer to the ExcelJS CSP Treats section.

Enable the Export Button

PivotGrid has a built-in "Export" button. To enable this button, set the export.enabled property to true.

index.js
  • $(function() {
  • $("#pivotGrid").dxPivotGrid({
  • export: {
  • enabled: true
  • }
  • });
  • });
NOTE
When users click the "Export" button in PivotGrid, the onExporting event handler is executed.

Export to XLSX

All export operations use the exportPivotGrid(options) method from the excelExporter module.

Before starting with exportPivotGrid, obtain:

  • A PivotGrid instance.
  • A target Excel worksheet.

An instance can be obtained through an event handler like onExporting, while the worksheet needs pre-creation:

JavaScript
  • const workbook = new ExcelJS.Workbook();
  • const worksheet = workbook.addWorksheet('Main sheet');

The following code snippet exports PivotGrid data as a blob that is then saved to an XLSX file.

  • DevExpress.excelExporter.exportPivotGrid({
  • component: pivotGridInstance,
  • worksheet: worksheet
  • }).then(function() {
  • workbook.xlsx.writeBuffer().then(function(buffer) {
  • saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'Sales.xlsx');
  • });
  • });
NOTE
You can pass a PivotGrid instance, a worksheet, and other properties to exportPivotGrid to customize your Excel sheet. For a full list, refer to PivotGridExportOptions.

Export to CSV

IMPORTANT
Refer to the CSV Injection section for information about CSV Injection Attacks.

You can also export PivotGrid to CSV. To do this, call the exportPivotGrid(options) method as follows:

JavaScript
  • $(function(){
  • const pivotGrid = $('#gridContainer').dxPivotGrid({
  • onExporting: function(e) {
  • const workbook = new ExcelJS.Workbook();
  • const worksheet = workbook.addWorksheet('Employees');
  • DevExpress.excelExporter.exportPivotGrid({
  • component: e.component,
  • worksheet: worksheet
  • }).then(function() {
  • workbook.csv.writeBuffer().then(function(buffer) {
  • saveAs(new Blob([buffer], { type: "application/octet-stream" }), "Report.csv");
  • });
  • });
  • },
  • }).dxPivotGrid('instance');
  • });

Export Field Panel

PivotGrid does not export field panel headers. To enable their export, pass the following properties to exportPivotGrid:

View Demo

Customize Cells

Use the customizeCell function inside the exportPivotGrid method to customize exported cells.

For instance, to outline (group) data in an Excel worksheet, define customizeCell as shown below:

JavaScript
  • $(function() {
  • $("#pivotGridContainer").dxPivotGrid({
  • // ...
  • onExporting(e) {
  • const workbook = new ExcelJS.Workbook();
  • const worksheet = workbook.addWorksheet('Companies');
  •  
  • DevExpress.excelExporter.exportPivotGrid({
  • component: e.component,
  • worksheet: worksheet,
  • topLeftCell: { row: 2, column: 2 },
  • customizeCell(e) {
  • if (e.pivotCell.area === 'row' && e.pivotCell.path?.length > 0) {
  • worksheet.getRow(e.pivotCell.rowIndex + 1).outlineLevel = e.pivotCell.path.length - 1;
  • }
  • }
  • }).then(function() {
  • workbook.xlsx.writeBuffer().then(function(buffer) {
  • saveAs(new Blob([buffer], { type: "application/octet-stream" }), "Companies.xlsx");
  • });
  • });
  • }
  • });
  • });

For another example of customizing your exported PivotGrid, see the following demo:

View Demo