Vue 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
Enable the Export Button
PivotGrid has a built-in "Export" button. To enable this button, set the export.enabled property to true
.
- <template>
- <DxPivotGrid ... >
- <DxExport :enabled="true" />
- </DxPivotGrid>
- </template>
- <script>
- //...
- </script>
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:
- <template>
- <div>
- <DxPivotGrid ...
- @exporting="onExporting"
- />
- </div>
- </template>
- <script setup lang="ts">
- import 'devextreme/dist/css/dx.light.css';
- import { DxPivotGrid, DxPivotGridTypes } from 'devextreme-vue/pivot-grid';
- import { Workbook } from 'exceljs';
- import { saveAs } from 'file-saver-es';
- import { exportPivotGrid } from 'devextreme/excel_exporter';
- function onExporting(e: DxPivotGridTypes.ExportingEvent) {
- 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");
- });
- });
- }
- </script>
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:
- <template>
- <DxPivotGrid ... @exporting="onExporting" />
- </template>
- <script setup lang="ts">
- import 'devextreme/dist/css/dx.light.css';
- import { DxPivotGrid, DxPivotGridTypes } from 'devextreme-vue/pivot-grid';
- import { Workbook } from 'exceljs';
- import { saveAs } from 'file-saver-es';
- import { exportPivotGrid } from 'devextreme/excel_exporter';
- function onExporting(e: DxPivotGridTypes.ExportingEvent) {
- 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");
- });
- });
- }
- </script>
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.