Vue Data Grid - Multiple Grids Export

This demo shows two DataGrids in different tabs. Click the Export multiple grids button to export two grids and arrange them on different pages of the PDF document.

To implement this functionality, call the exportDataGrid(options) methods in a chain of Promises, one after another. Use the jsPDF.addPage() method to add a page in the PDF document.

You can use the customizeCell function to customize cell appearance in the PDF document. In this demo, the customizeCell function highlights alternate (even) rows.

Backend API

<template> <div> <div id="exportContainer"> <DxButton text="Export multiple grids" icon="exportpdf" @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 { ArrayStore, DataSource } from 'devextreme-vue/common/data'; import { exportDataGrid, type DataGridCell, type Cell } from 'devextreme-vue/common/export/pdf'; import { jsPDF } from 'jspdf'; import { products, type Product } from './data.ts'; const priceGridRef = ref<DxDataGrid | null>(null); const ratingGridRef = ref<DxDataGrid | null>(null); const store = new ArrayStore<Product, number>({ data: products, key: 'Product_ID', }); const priceDataSource = new DataSource<Product, number>({ store, select: ['Product_ID', 'Product_Name', 'Product_Sale_Price', 'Product_Retail_Price'], filter: ['Product_ID', '<', 10], }); const ratingDataSource = new DataSource<Product, number>({ store, select: ['Product_ID', 'Product_Name', 'Product_Consumer_Rating', 'Product_Category'], filter: ['Product_ID', '<', 10], }); const exportGrids = () => { const priceGrid = priceGridRef.value?.instance!; const ratingGrid = ratingGridRef.value?.instance!; const doc = new jsPDF(); exportDataGrid({ jsPDFDocument: doc, component: priceGrid, topLeft: { x: 7, y: 5 }, columnWidths: [20, 50, 50, 50], customizeCell: ({ gridCell, pdfCell }) => { setAlternatingRowsBackground(priceGrid, gridCell!, pdfCell!); }, }).then(() => { doc.addPage(); exportDataGrid({ jsPDFDocument: doc, component: ratingGrid, topLeft: { x: 7, y: 5 }, columnWidths: [20, 50, 50, 50], customizeCell: ({ gridCell, pdfCell }) => { setAlternatingRowsBackground(ratingGrid, gridCell!, pdfCell!); }, }).then(() => { doc.save('MultipleGrids.pdf'); }); }); }; const setAlternatingRowsBackground = ( dataGrid: DxDataGrid['instance'], gridCell: DataGridCell, pdfCell: Cell, ) => { if (gridCell.rowType === 'data') { const rowIndex = dataGrid?.getRowIndexByKey(gridCell.data.Product_ID); if (rowIndex && rowIndex % 2 === 0) { pdfCell.backgroundColor = '#D3D3D3'; } } }; </script> <style> #priceDataGrid, #ratingDataGrid { padding: 10px; } #exportContainer { text-align: right; } #tabPanel { padding-top: 10px; } </style>

export interface Product { Product_ID: number; Product_Name: string; Product_Sale_Price: number; Product_Retail_Price: number; Product_Consumer_Rating: number; Product_Category: string; } export const products: Product[] = [ { Product_ID: 1, Product_Name: "HD Video Player", Product_Sale_Price: 220.00, Product_Retail_Price: 330.00, Product_Consumer_Rating: 4, Product_Category: "Video Players", }, { Product_ID: 2, Product_Name: "SuperHD Video Player", Product_Sale_Price: 275.00, Product_Retail_Price: 400.00, Product_Consumer_Rating: 4, Product_Category: "Video Players", }, { Product_ID: 3, Product_Name: "SuperPlasma 50", Product_Sale_Price: 1800.00, Product_Retail_Price: 2400.00, Product_Consumer_Rating: 4.5, Product_Category: "Televisions", }, { Product_ID: 4, Product_Name: "SuperLED 50", Product_Sale_Price: 1100.00, Product_Retail_Price: 1600.00, Product_Consumer_Rating: 5, Product_Category: "Televisions", }, { Product_ID: 5, Product_Name: "SuperLED 42", Product_Sale_Price: 1050.00, Product_Retail_Price: 1450.00, Product_Consumer_Rating: 5, Product_Category: "Televisions", }, { Product_ID: 6, Product_Name: "SuperLCD 55", Product_Sale_Price: 1045.00, Product_Retail_Price: 1350.00, Product_Consumer_Rating: 4.5, Product_Category: "Televisions", }, { Product_ID: 7, Product_Name: "SuperLCD 42", Product_Sale_Price: 999.00, Product_Retail_Price: 1200.00, Product_Consumer_Rating: 4, Product_Category: "Televisions", }, { Product_ID: 8, Product_Name: "SuperPlasma 65", Product_Sale_Price: 2900.00, Product_Retail_Price: 3500.00, Product_Consumer_Rating: 3, Product_Category: "Televisions", }, { Product_ID: 9, Product_Name: "SuperLCD 70", Product_Sale_Price: 3200.00, Product_Retail_Price: 4000.00, Product_Consumer_Rating: 4, Product_Category: "Televisions", }, ];

import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');

<!DOCTYPE html> <html lang="en"> <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=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="./bundle.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> <script src="bundles/vendor/vue.vendor.js"></script> <script src="./bundle.js"></script> </body> </html>