Angular 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:
- npm install --save exceljs file-saver
- {
- // ...
- "compilerOptions": {
- // ...
- "paths": {
- // ...
- "exceljs": [
- "node_modules/exceljs/dist/exceljs.min.js"
- ]
- }
- },
- // ...
- }
Enable the Export Button
PivotGrid has a built-in "Export" button. To enable this button, set the export.enabled property to true
.
- <dx-pivot-grid ... >
- <dxo-export [enabled]="true"></dxo-export>
- </dx-pivot-grid>
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.
- exportPivotGrid({
- worksheet: worksheet,
- component: pivotGridInstance
- }).then(function() {
- workbook.xlsx.writeBuffer().then(function(buffer: BlobPart) {
- 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:
- import { Component } from '@angular/core';
- import { Workbook } from 'exceljs';
- import { saveAs } from 'file-saver-es';
- import { exportPivotGrid } from 'devextreme/excel_exporter';
- @Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css']
- })
- export class AppComponent {
- @ViewChild(DxPivotGridComponent, { static: false }) pivotGrid: DxPivotGridComponent;
- onExporting: function(e) {
- const workbook = new Workbook();
- const worksheet = workbook.addWorksheet('Employees');
- exportPivotGrid({
- component: e.component,
- worksheet: worksheet
- }).then(function() {
- workbook.csv.writeBuffer().then(function(buffer) {
- saveAs(new Blob([buffer], { type: "application/octet-stream" }), "Report.csv");
- });
- });
- }
- }
- <dx-pivot-grid ...
- (onExporting)="onExporting($event)"
- >
- </dx-pivot-grid>
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:
- import { Component } from '@angular/core';
- import { exportPivotGrid } from 'devextreme/excel_exporter';
- import { Workbook } from 'exceljs';
- import saveAs from 'file-saver';
- @Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css']
- })
- export class AppComponent {
- onExporting(e) {
- const workbook = new Workbook();
- const worksheet = workbook.addWorksheet('Companies');
- exportPivotGrid({
- component: e.component,
- worksheet: worksheet,
- 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: BlobPart) {
- saveAs(new Blob([buffer], { type: "application/octet-stream" }), "Companies.xlsx");
- });
- });
- }
- }
- <dx-pivot-grid ...
- (onExporting)="onExporting($event)">
- </dx-pivot-grid>
For another example of customizing your exported PivotGrid, see the following demo:
If you have technical questions, please create a support ticket in the DevExpress Support Center.