Client-Side Exporting

View Demo Watch Video

Client-side export requires a third-party library called JSZip. In a modular environment, it is included in the DevExtreme dependencies and is activated automatically in most of the applications. However, this does not apply to apps created with Angular CLI 6+. In such apps, you need to register JSZip.

If your app does not use modules, reference the library on your page before the DevExtreme files:

<!-- A CDN link -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
<!-- or a local script -->
<script type="text/javascript" src="js/jszip.min.js"></script>
<!-- ... -->
<!-- DevExtreme files are referenced here -->

The following restrictions apply when exporting data on the client side:

• Only XLSX files are supported.
• Only visible columns are exported.^*
• Modifications made in the cell and row templates, master-detail interface, and data mapping are omitted. You can use calculated columns instead of the latter.
• Excel limits the number of grouping levels to 7, while in the DataGrid it is unlimited.
• Client-side export in Safari on MacOS is possible only through a proxy on the server.

A user can click the Export button to save an Excel file with the exported data. Data types, sorting, filtering, and grouping settings are maintained.

To allow a user to export data, set the export.enabled option to true.

$(function () {
    $("#dataGridContainer").dxDataGrid({
        // ...
        export: {
            enabled: true
        }
    });
});

<dx-data-grid ... >
    <dxo-export [enabled]="true"></dxo-export>
</dx-data-grid>

import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

You can disable exporting a specific column by setting its allowExporting option to false:

$(function () {
    $("#dataGridContainer").dxDataGrid({
        export: {
            enabled: true
        },
        columns: [{
            dataField: "id",
            allowExporting: false
        }, 
            // ...
        ]
    });
});

<dx-data-grid ... >
    <dxo-export [enabled]="true"></dxo-export>
    <dxi-column dataField="id" [allowExporting]="false"></dxi-column>
    <!-- ... -->
</dx-data-grid>

import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

The resulting file is renamed according to the fileName option, and contains only the selected rows if you set the allowExportSelectedData option to true.

$(function () {
    $("#dataGridContainer").dxDataGrid({
        // ...
        export: {
            enabled: true,
            allowExportSelectedData: true,
            fileName: "NewFileName"
        }
    });
});

<dx-data-grid ... >
    <dxo-export 
        [enabled]="true"
        [allowExportSelectedData]="true"
        fileName="NewFileName">
    </dxo-export>
</dx-data-grid>

import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

View Demo

The customizeExcelCell function allows you to change the Excel cell font, background color and fill pattern, as well as align, format, and modify the cell value.

View Demo

In the code below, Excel cells are customized. Values in the Cost column are formatted according to values in the Currency column. Cells in the Product column have a different appearance if the product costs more than 3000.

$(function() {
    $("#dataGridContainer").dxDataGrid({
        columns: ['Product', 'Cost'],
        dataSource: [
            { Product: 'Projector', Cost: 3500, Currency: '$' },
            { Product: 'Video Player', Cost: 170, Currency: '€' },
            // ...
        ],
        export: {
            enabled: true,
            customizeExcelCell: function(e) {
                if(e.gridCell.rowType === 'data') {
                    if(e.gridCell.column.dataField == "Cost") {
                        e.numberFormat = `"${e.gridCell.data.Currency}"#,##0.00`;
                    }
                    if(e.gridCell.column.dataField == "Product" && e.gridCell.data.Cost > 3000) {
                        e.fillPatternType = "lightGray";
                        e.fillPatternColor = "#FF0000";
                    }
                }
            }
        }
    })
})

import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    dataSource = [
        { Product: 'Projector', Cost: 3500, Currency: '$' },
        { Product: 'Video Player', Cost: 170, Currency: '€' },
        // ...
    ];
    customizeExcelCell(e) {
        if(e.gridCell.rowType === 'data') {
            if(e.gridCell.column.dataField == "Cost") {
                e.numberFormat = `"${e.gridCell.data.Currency}"#,##0.00`;
            }
            if(e.gridCell.column.dataField == "Product" && e.gridCell.data.Cost > 3000) {
                e.fillPatternType = "lightGray";
                e.fillPatternColor = "#FF0000";
            }
        }
    }
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

<dx-data-grid 
    [columns]="['Product', 'Cost']"
    [dataSource]="dataSource">
    <dxo-export 
        [enabled]="true" 
        [customizeExcelCell]="customizeExcelCell">
    </dxo-export>
</dx-data-grid>

Hidden columns are ignored on export. If you still need to export them, use the onExporting and onExported functions. Refer to the onExporting description for an example.

Call exportToExcel(selectionOnly) method to export data programmatically. When the selectionOnly parameter is false, the method exports all rows; when true - only the selected ones.

// Exports selected rows
$("#dataGridContainer").dxDataGrid("instance").exportToExcel(true);

import { ..., ViewChild } from "@angular/core";
import { DxDataGridModule, DxDataGridComponent } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxDataGridComponent) dataGrid: DxDataGridComponent;
    exportSelectedData () {
        this.dataGrid.instance.exportToExcel(true);
    };
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

The DataGrid raises the following export-related events:

• exporting
  Allows you to request export details or prevent export. Can also be used to adjust grid columns before exporting.

• exported
  Allows you to notify an end user when exporting is completed.

• fileSaving
  Allows you to access the exported data in the BLOB format and/or prevent it from being saved on the user's local storage.

You can handle these events with functions. Assign the handling functions to the onExporting, onExported and onFileSaving options when you configure the widget if they are going to remain unchanged at runtime.

$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        onExporting: function (e) {
            // Handler of the "exporting" event
        },
        onExported: function (e) {
            // Handler of the "exported" event
        },
        onFileSaving: function (e) {
            // Handler of the "fileSaving" event
        }
    });
});

<dx-data-grid ...
    (onExporting)="onExporting($event)"
    (onExported)="onExported($event)"
    (onFileSaving)="onFileSaving($event)">
</dx-data-grid>

import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    onExporting (e) {
        // Handler of the "exporting" event
    };
    onExported (e) {
        // Handler of the "exported" event
    };
    onFileSaving (e) {
        // Handler of the "fileSaving" event
    }
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

Otherwise (or if you need several handlers for a single event), subscribe to the export-related events using the on(eventName, eventHandler) method. This approach is more typical of jQuery.

var exportedHandler1 = function (e) {
    // First handler of the "exported" event
};

var exportedHandler2 = function (e) {
    // Second handler of the "exported" event
};

$("#dataGridContainer").dxDataGrid("instance")
    .on("exported", exportedHandler1)
    .on("exported", exportedHandler2);

See Also

• Handle Events: jQuery | Angular | AngularJS | Knockout | Vue | React | ASP.NET MVC

If you need the export function in browsers that do not provide an API for saving files (that is, in Safari on Mac OS), implement a server-side proxy that streams the resulting file back to an end user in response to a POST request. The proxy implementation is different for each platform.

Specify the export.proxyUrl option to make the widget export a file through the proxy.