Export Multiple Grids
The exportDataGrid() method allows users to export multiple grids to one Excel document. Grids are exported consequently in a chain of Promises.
In this demo, this functionality is used to export two DataGrids into separate worksheets in the same workbook. Starting position of each exported grid is set using the topLeftCell property.
Use the customizeCell method to customize the exported worksheets.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
<template>
<div>
<div id="exportContainer">
<DxButton
text="Export multiple grids"
icon="xlsxfile"
@click="exportGrids"
/>
</div>
<DxTabPanel
id="tabPanel"
:defer-rendering="false"
>
<DxItem title="Price">
<template #default>
<DxDataGrid
id="priceDataGrid"
width="100%"
ref="priceGridRef"
:data-source="priceDataSource"
:show-borders="true"
:row-alternation-enabled="true"
>
<DxColumn
data-field="Product_ID"
caption="ID"
:width="50"
/>
<DxColumn
data-field="Product_Name"
caption="Name"
/>
<DxColumn
data-field="Product_Sale_Price"
caption="Sale Price"
data-type="number"
format="currency"
/>
<DxColumn
data-field="Product_Retail_Price"
caption="Retail Price"
data-type="number"
format="currency"
/>
</DxDataGrid>
</template>
</DxItem>
<DxItem title="Rating">
<template #default>
<DxDataGrid
id="ratingDataGrid"
width="100%"
ref="ratingGridRef"
:data-source="ratingDataSource"
:show-borders="true"
:row-alternation-enabled="true"
>
<DxColumn
data-field="Product_ID"
caption="ID"
:width="50"
/>
<DxColumn
data-field="Product_Name"
caption="Name"
/>
<DxColumn
data-field="Product_Consumer_Rating"
caption="Rating"
/>
<DxColumn
data-field="Product_Category"
caption="Category"
/>
</DxDataGrid>
</template>
</DxItem>
</DxTabPanel>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import DxButton from 'devextreme-vue/button';
import DxTabPanel, { DxItem } from 'devextreme-vue/tab-panel';
import { DxDataGrid, DxColumn } from 'devextreme-vue/data-grid';
import { Workbook } from 'exceljs';
// Our demo infrastructure requires us to use 'file-saver-es'.
// We recommend that you use the official 'file-saver' package in your applications.
import { saveAs } from 'file-saver-es';
import { exportDataGrid } from 'devextreme/excel_exporter';
import 'devextreme/data/odata/store';
const priceGridRef = ref<DxDataGrid | null>(null);
const ratingGridRef = ref<DxDataGrid | null>(null);
const priceDataSource = {
store: {
type: 'odata',
url: 'https://js.devexpress.com/Demos/DevAV/odata/Products',
key: 'Product_ID',
},
select: ['Product_ID', 'Product_Name', 'Product_Sale_Price', 'Product_Retail_Price'],
filter: ['Product_ID', '<', 10],
};
const ratingDataSource = {
store: {
type: 'odata',
url: 'https://js.devexpress.com/Demos/DevAV/odata/Products',
key: 'Product_ID',
},
select: ['Product_ID', 'Product_Name', 'Product_Consumer_Rating', 'Product_Category'],
filter: ['Product_ID', '<', 10],
};
const exportGrids = () => {
const workbook = new Workbook();
const priceSheet = workbook.addWorksheet('Price');
const ratingSheet = workbook.addWorksheet('Rating');
priceSheet.getRow(2).getCell(2).value = 'Price';
priceSheet.getRow(2).getCell(2).font = { bold: true, size: 16, underline: 'double' };
ratingSheet.getRow(2).getCell(2).value = 'Rating';
ratingSheet.getRow(2).getCell(2).font = { bold: true, size: 16, underline: 'double' };
exportDataGrid({
worksheet: priceSheet,
component: priceGridRef.value?.instance,
topLeftCell: { row: 4, column: 2 },
customizeCell: ({ gridCell, excelCell }) => {
setAlternatingRowsBackground(gridCell, excelCell);
},
}).then(() => exportDataGrid({
worksheet: ratingSheet,
component: ratingGridRef.value?.instance,
topLeftCell: { row: 4, column: 2 },
customizeCell: ({ gridCell, excelCell }) => {
setAlternatingRowsBackground(gridCell, excelCell);
},
})).then(() => {
workbook.xlsx.writeBuffer().then((buffer) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'MultipleGrids.xlsx');
});
});
};
const setAlternatingRowsBackground = (gridCell, excelCell) => {
if (gridCell.rowType === 'header' || gridCell.rowType === 'data') {
if (excelCell.fullAddress.row % 2 === 0) {
excelCell.fill = {
type: 'pattern', pattern: 'solid', fgColor: { argb: 'D3D3D3' }, bgColor: { argb: 'D3D3D3' },
};
}
}
};
</script>
<style scoped>
#priceDataGrid,
#ratingDataGrid {
padding: 10px;
}
#exportContainer {
text-align: right;
}
#tabPanel {
padding-top: 10px;
}
</style>
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
<!DOCTYPE html>
<html>
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.1.5/css/dx.light.css" />
<script type="module">
import * as vueCompilerSFC from "https://unpkg.com/@vue/compiler-sfc@3.3.4/dist/compiler-sfc.esm-browser.js";
window.vueCompilerSFC = vueCompilerSFC;
</script>
<script src="https://unpkg.com/typescript@3.9.10/lib/typescript.js"></script>
<script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script>
<script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript">
System.import("./index.js");
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
</body>
</html>
window.exports = window.exports || {};
window.config = {
transpiler: 'plugin-babel',
meta: {
'*.vue': {
loader: 'vue-loader',
},
'*.ts': {
loader: 'demo-ts-loader',
},
'*.svg': {
loader: 'svg-loader',
},
'devextreme/localization.js': {
'esModule': true,
},
'exceljs': {
'esModule': true,
},
},
paths: {
'root:': '../../../../../',
'npm:': 'https://unpkg.com/',
},
map: {
'vue': 'npm:vue@3.3.4/dist/vue.esm-browser.js',
'vue-loader': 'npm:dx-systemjs-vue-browser@1.1.1/index.js',
'demo-ts-loader': 'root:utils/demo-ts-loader.js',
'svg-loader': 'root:utils/svg-loader.js',
'exceljs': 'npm:exceljs@4.3.0/dist/exceljs.min.js',
'file-saver-es': 'npm:file-saver-es@2.0.5/dist/FileSaver.min.js',
'mitt': 'npm:mitt/dist/mitt.umd.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@23.1.6/cjs',
'devextreme-vue': 'npm:devextreme-vue@23.1.6',
'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.6.2/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.2/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.49/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12',
'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',
'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',
// Prettier
'prettier/standalone': 'npm:prettier@2.8.4/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.4/parser-html.js',
},
packages: {
'devextreme-vue': {
main: 'index.js',
},
'devextreme': {
defaultExtension: 'js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.12/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
},
};
System.config(window.config);