Vue PivotGrid - export

Configures client-side exporting.

Selector: DxExport
Type:

Object

A user can click the Export button to save an Excel file with the exported data. Data types, sort, filter, and group settings are maintained.

View Demo

The following instructions show how to enable and configure client-side export:

  1. Install or reference the required libraries
    This feature requires ExcelJS v4+ and FileSaver v2.0.2+.

    jQuery
    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.1.1/exceljs.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.2/FileSaver.min.js"></script>
    <!-- reference the DevExtreme sources here -->
</head>
    Angular
    Installation command
    tsconfig.app.json
    npm install --save exceljs file-saver
    {
    "compilerOptions": {
        // ...
        "paths": {
            // ...
            "exceljs": [
                "node_modules/exceljs/dist/exceljs.min.js"
            ]
        }
    }
}
    Vue
    npm install --save exceljs file-saver
    React
    npm install --save exceljs file-saver

  2. Enable the export UI
    Set the export.enabled property to true:

    jQuery
    JavaScript
    $(function () {
    $("#pivotGridContainer").dxPivotGrid({
        export: {
            enabled: true
        }
    });
});
    Angular
    app.component.html
    app.component.ts
    app.module.ts
    <dx-pivot-grid ... >
    <dxo-export [enabled]="true"></dxo-export>
</dx-pivot-grid>
    import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    // ...
}
    import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxPivotGridModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxPivotGridModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
    Vue
    App.vue
    <template>
    <DxPivotGrid ... >
        <DxExport
            :enabled="true"
        />
    </DxPivotGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxPivotGrid, 
    DxExport,
    DxColumn
} from 'devextreme-vue/pivot-grid';

export default {
    components: {
        DxPivotGrid,
        DxExport,
        DxColumn
    }
}
</script>
    React
    App.js
    import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import PivotGrid, {
    Export,
    Column
} from 'devextreme-react/pivot-grid';

export default function App() {
    return (
        <PivotGrid ... >
            <Export enabled={true} />
        </PivotGrid>
    );
}

  3. Export the PivotGrid
    Implement the onExporting handler and call the exportPivotGrid(options) method in it. In the code below, this method exports the PivotGrid as is, but you can use ExcelExportPivotGridProps to configure export settings, including cell customization. The PivotGrid is exported to an Excel worksheet that is created using the ExcelJS API. To save the Excel document, call the FileSaver's saveAs method. The e.cancel parameter disables the deprecated built-in export implementation with fewer capabilities.

    jQuery
    index.js
    $('#gridContainer').dxPivotGrid({
    export: {
        enabled: true
    },
    onExporting: function(e) { 
        var workbook = new ExcelJS.Workbook(); 
        var worksheet = workbook.addWorksheet('Main sheet'); 
        DevExpress.excelExporter.exportPivotGrid({ 
            worksheet: worksheet, 
            component: e.component,
            customizeCell: function(options) {
                var excelCell = options;
                excelCell.font = { name: 'Arial', size: 12 };
                excelCell.alignment = { horizontal: 'left' };
            } 
        }).then(function() {
            workbook.xlsx.writeBuffer().then(function(buffer) { 
                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'PivotGrid.xlsx'); 
            }); 
        }); 
        e.cancel = true; 
    }
});
    Angular
    app.component.html
    app.component.ts
    app.module.ts
    <dx-pivot-grid ...
    (onExporting)="onExporting($event)">
    <dxo-export [enabled]="true"></dxo-export>
</dx-pivot-grid>
    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('Main sheet');
        exportPivotGrid({
            component: e.component,
            worksheet: worksheet,
            customizeCell: function(options) {
                const excelCell = options;
                excelCell.font = { name: 'Arial', size: 12 };
                excelCell.alignment = { horizontal: 'left' };
            } 
        }).then(function() {
            workbook.xlsx.writeBuffer()
                .then(function(buffer: BlobPart) {
                    saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'PivotGrid.xlsx');
                });
        });
        e.cancel = true; 
    }
}
    import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxPivotGridModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxPivotGridModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
    Vue
    App.vue
    <template>
    <DxPivotGrid ...
        @exporting="onExporting">
        <DxExport
            :enabled="true"
        />
    </DxPivotGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxPivotGrid, DxExport } from 'devextreme-vue/pivot-grid';
import { exportPivotGrid } from 'devextreme/excel_exporter';
import { Workbook } from 'exceljs';
import saveAs from 'file-saver';

export default {
    components: {
        DxPivotGrid,
        DxExport
    },
    methods: {
        onExporting(e) {
            const workbook = new Workbook();
            const worksheet = workbook.addWorksheet('Main sheet');
            exportPivotGrid({
                component: e.component,
                worksheet: worksheet,
                customizeCell: function(options) {
                    const excelCell = options;
                    excelCell.font = { name: 'Arial', size: 12 };
                    excelCell.alignment = { horizontal: 'left' };
                } 
            }).then(function() {
                workbook.xlsx.writeBuffer()
                    .then(function(buffer) {
                        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'PivotGrid.xlsx');
                    });
            });
            e.cancel = true;
        }
    }
}
</script>
    React
    App.js
    import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { Workbook } from 'exceljs';
import saveAs from 'file-saver';
import PivotGrid, { Export } from 'devextreme-react/pivot-grid';
import { exportPivotGrid } from 'devextreme/excel_exporter';

export default function App() {
    return (
        <PivotGrid ...
            onExporting={onExporting}>
            <Export enabled={true} />
        </PivotGrid>
    );
}

function onExporting(e) {
    const workbook = new Workbook();
    const worksheet = workbook.addWorksheet('Main sheet');
    exportPivotGrid({
        component: e.component,
        worksheet: worksheet,
        customizeCell: function(options) {
            const excelCell = options;
            excelCell.font = { name: 'Arial', size: 12 };
            excelCell.alignment = { horizontal: 'left' };
        } 
    }).then(function() {
        workbook.xlsx.writeBuffer()
            .then(function(buffer) {
                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'PivotGrid.xlsx');
            });
    });
    e.cancel = true;
}

The following restrictions apply when users export PivotGrid:

  • Only XLSX files are supported out of the box. To export PivotGrid to CSV, call the exportPivotGrid(options) method as shown in the following ticket: Export PivotGrid into CSV file.
  • Only visible rows and columns are exported.

enabled

Enables client-side exporting.

Type:

Boolean

Default Value: false

View Demo

fileName Deprecated

Since v20.2, we recommend ExcelJS-based export which does not use this property.

Specifies a default name for the file to which grid data is exported.

Selector: file-name
Type:

String

Default Value: 'PivotGrid'

ignoreExcelErrors Deprecated

Since v20.2, we recommend ExcelJS-based export which does not use this property.

Specifies whether Excel should hide warnings if there are errors in the exported document.

Selector: ignore-excel-errors
Type:

Boolean

Default Value: true

proxyUrl Deprecated

IMPORTANT
Since v10, Safari browser supports API for saving files, and this property is no longer required.

Specifies the URL of the server-side proxy that streams the resulting file to the end user to enable exporting in the Safari browser.

Selector: proxy-url
Type:

String

Default Value: undefined

Generally, exporting is performed using client-side API in browsers. However, the Safari (integrated in Mac OS) browser does not implement an API for saving files. In this instance, the PivotGrid UI component can POST the content to a server-side proxy, which will stream the file back to the end user. To enable this functionality, set the export.proxyUrl property to the proxy, which will stream the file to the end user. When implementing the proxy, take the following information into account.

  • Your proxy will receive a POST request with the following parameters in the request body: fileName, contentType (the MIME type of the file) and base64 (the base-64 encoded file content).
  • The proxy should return the decoded file with the "Content-Disposition" header set to attachment; filename="".