Vue Common - Object Structures - ExcelExportDataGridProps

Properties that can be passed to the exportDataGrid(options) method from the excelExporter module.

import { DataGridExport_Options } from "devextreme/common/export/excel"

Type:

Object

autoFilterEnabled

Specifies whether to enable Excel filtering in the document.

Type:

Boolean

Default Value: false

component

A DataGrid instance. This setting is required.

Type:

DataGrid

| undefined

Default Value: undefined

customizeCell

Customizes Excel cells after creation.

Type:

Function

Function parameters:

options:

Object

customizeCell options.

Object structure:

Name	Type	Description
excelCell	Object	An Excel cell.
gridCell	ExcelDataGridCell	A DataGrid cell.

DevExtreme ExcelJS allows you to customize the following Excel cell properties:

The following code snippet checks DataGrid cell rowType values to customize Excel cells in data rows:

jQuery

JavaScript

HTML

$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        export: {
            enabled: true
        },
        onExporting(e) {
            const workbook = new ExcelJS.Workbook();
            const worksheet = workbook.addWorksheet('Companies');

            DevExpress.excelExporter.exportDataGrid({
                component: e.component,
                worksheet: worksheet,
                topLeftCell: { row: 2, column: 2 },
                customizeCell: function(options) {
                    var { gridCell, excelCell } = options;

                    if(gridCell.rowType === 'data') {
                        excelCell.font = { color: { argb: 'FF0000FF' }, underline: true };
                        excelCell.alignment = { horizontal: 'left' };
                    }
                }
            }).then(function() {
                workbook.xlsx.writeBuffer().then(function(buffer) {
                    saveAs(new Blob([buffer], { type: "application/octet-stream" }), "Companies.xlsx");
                });
            });
        }
    });
});

<head>
    <!-- ... -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.0/polyfill.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/devextreme-exceljs-fork@4.4.1/dist/dx-exceljs-fork.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

app.component.html

app.component.ts

app.module.ts

<dx-data-grid ...
    (onExporting)="onExporting($event)">
    <dxo-data-grid-export [enabled]="true"></dxo-data-grid-export>
</dx-data-grid>

import { Component } from '@angular/core';
import { exportDataGrid } from 'devextreme/excel_exporter';
import { Workbook } from 'devextreme-exceljs-fork';
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');

        exportDataGrid({
            component: e.component,
            worksheet: worksheet,
            topLeftCell: { row: 2, column: 2 },
            customizeCell: function(options) {
                const { gridCell, excelCell } = options;

                if(gridCell.rowType === 'data') {
                    excelCell.font = { color: { argb: 'FF0000FF' }, underline: true };
                    excelCell.alignment = { horizontal: 'left' };
                }
            }
        }).then(function() {
            workbook.xlsx.writeBuffer().then(function(buffer: BlobPart) {
                saveAs(new Blob([buffer], { type: "application/octet-stream" }), "Companies.xlsx");
            });
        });
    }
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxDataGridModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxDataGridModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Vue

App.vue

<template>
    <DxDataGrid ...
        @exporting="onExporting">
        <DxExport
            :enabled="true"
        />
    </DxDataGrid>
</template>

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

import { DxDataGrid, DxExport } from 'devextreme-vue/data-grid';
import { exportDataGrid } from 'devextreme/excel_exporter';
import { Workbook } from 'devextreme-exceljs-fork';
import saveAs from 'file-saver';

export default {
    components: {
        DxDataGrid,
        DxExport
    },
    methods: {
        onExporting(e) {
            const workbook = new Workbook();
            const worksheet = workbook.addWorksheet('Companies');

            exportDataGrid({
                component: e.component,
                worksheet: worksheet,
                topLeftCell: { row: 2, column: 2 },
                customizeCell: function(options) {
                    const { gridCell, excelCell } = options;

                    if(gridCell.rowType === 'data') {
                        excelCell.font = { color: { argb: 'FF0000FF' }, underline: true };
                        excelCell.alignment = { horizontal: 'left' };
                    }
                }
            }).then(function() {
                workbook.xlsx.writeBuffer().then(function(buffer) {
                    saveAs(new Blob([buffer], { type: "application/octet-stream" }), "Companies.xlsx");
                });
            });
        }
    }
}
</script>

React

App.js

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import DataGrid, { Export } from 'devextreme-react/data-grid';
import { Workbook } from 'devextreme-exceljs-fork';
import saveAs from 'file-saver';
import { exportDataGrid } from 'devextreme/excel_exporter';

class App extends React.Component {
    render() {
        return (
            <DataGrid ...
                onExporting={this.onExporting}>
                <Export enabled={true} />
            </DataGrid>
        );
    }

    onExporting(e) {
        const workbook = new Workbook();
        const worksheet = workbook.addWorksheet('Companies');

        exportDataGrid({
            component: e.component,
            worksheet: worksheet,
            topLeftCell: { row: 2, column: 2 },
            customizeCell: function(options) {
                const { gridCell, excelCell } = options;

                if(gridCell.rowType === 'data') {
                    excelCell.font = { color: { argb: 'FF0000FF' }, underline: true };
                    excelCell.alignment = { horizontal: 'left' };
                }
            }
        }).then(function() {
            workbook.xlsx.writeBuffer().then(function(buffer) {
                saveAs(new Blob([buffer], { type: "application/octet-stream" }), "Companies.xlsx");
            });
        });
    }
}
export default App;

NOTE

To add asynchronous operations to customizeCell, follow these steps:

Define a Promise array in the onExporting handler.
In customizeCell, add your asynchronous operations to the Promise array.

In exportDataGrid.then(), save the exported file within a Promise.all().then() callback. Pass the promise array defined in onExporting as the Promise.all() parameter as follows:

onExporting(e) {
    const workbook = new Workbook();
    const worksheet = workbook.addWorksheet('Companies');

    let promiseArray = [];

    exportDataGrid({
        component: e.component,
        worksheet: worksheet,
        topLeftCell: { row: 2, column: 2 },
        customizeCell: function(options) {
            const asyncOperation = new Promise((resolve, reject) => {
                // ...
            });

            promiseArray.push(asyncOperation);
        }
    }).then(() => {
        Promise.all(promiseArray).then(() => {
            workbook.xlsx.writeBuffer().then(function(buffer) {
                saveAs(new Blob([buffer], { type: "application/octet-stream" }), "Companies.xlsx");
            });
        });
    });

}

Cell Customization Demo Header and Footer Demo

View on GitHub

encodeExecutableContent

Specifies if the CSV export routine saves potentially dangerous content as plain text data.

Type:

Boolean

Default Value: false

Exported spreadsheet documents can be unsafe because executable content (such as formulas) may include malicious code. A spreadsheet application can execute this code if a user opens such a file and confirms that the application can load and execute dynamic content.

Enable this property to ensure that exported CSV files are safe for loading in third-party spreadsheet applications.

keepColumnWidths

Specifies whether Excel columns should have the same width as their source UI component's columns.

Type:

Boolean

Default Value: true

loadPanel

Configures the load panel.

Type:

Object

selectedRowsOnly

Specifies whether to export only selected rows.

Type:

Boolean

Default Value: false

topLeftCell

A cell used as a start position for export.

Type:

Object

|

String

Default Value: { row: 1, column: 1 }

The cell is specified using coordinates in the Excel document. For example, the following code specifies cell B2:

DevExpress.excelExporter.exportDataGrid({
    // ...  
    topLeftCell: { row: 2, column: 2 } 
});

You can also specify the topLeftCell using the Excel notation:

DevExpress.excelExporter.exportDataGrid({
    // ...  
    topLeftCell: "B2" 
});

View Demo

worksheet

An Excel worksheet to which the grid should be exported.

Type:

Object

| undefined

Default Value: undefined

A worksheet is a part of a workbook. Refer to the DevExtreme ExcelJS documentation for information on how to create a workbook and add a worksheet to it.