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:
Install Dependencies
To export PivotGrid data to Excel, you first need to install the following third-party libraries:
- <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>
Enable the Export Button
PivotGrid has a built-in "Export" button. To enable this button, set the export.enabled property to true
.
- $(function() {
- $("#pivotGrid").dxPivotGrid({
- export: {
- enabled: true
- }
- });
- });
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:
- 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');
- });
- });
Export to CSV
You can also export PivotGrid to CSV. To do this, call the exportPivotGrid(options) method as follows:
- $(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:
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:
- $(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: