DevExtreme v23.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

Header and Footer

ExcelJS library allows you to customize worksheets outside the exported cell area. This demo uses this functionality to add a header (a title before exported data) and a footer (a note after exported data).

Review the onExporting handler to see the data export code. The functions that create header and footer sections utilize the following customization features:

www.wikipedia.org
Backend API
<template> <DxDataGrid id="grid" :data-source="countries" key-expr="ID" :show-borders="true" @exporting="onExporting" > <DxExport :enabled="true"/> <DxColumn data-field="Country"/> <DxColumn data-field="Area"/> <DxColumn caption="Population"> <DxColumn caption="Total" data-field="Population_Total" format="fixedPoint" /> <DxColumn caption="Urban" data-field="Population_Urban" format="percent" /> </DxColumn> <DxColumn caption="Nominal GDP"> <DxColumn caption="Total, mln $" data-field="GDP_Total" format="fixedPoint" sort-order="desc" /> <DxColumn caption="By Sector"> <DxColumn :width="95" :format="gdpFormat" caption="Agriculture" data-field="GDP_Agriculture" /> <DxColumn :width="80" :format="gdpFormat" caption="Industry" data-field="GDP_Industry" /> <DxColumn :width="85" :format="gdpFormat" caption="Services" data-field="GDP_Services" /> </DxColumn> </DxColumn> </DxDataGrid> </template> <script setup lang="ts"> import DxDataGrid, { DxColumn, DxExport, DxDataGridTypes, } 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 { countries } from './data.ts'; const gdpFormat = { type: 'percent', precision: 1, }; const onExporting = (e: DxDataGridTypes.ExportingEvent) => { const workbook = new Workbook(); const worksheet = workbook.addWorksheet('CountriesPopulation'); exportDataGrid({ component: e.component, worksheet, topLeftCell: { row: 4, column: 1 }, }).then((cellRange) => { // header const headerRow = worksheet.getRow(2); headerRow.height = 30; worksheet.mergeCells(2, 1, 2, 8); headerRow.getCell(1).value = 'Country Area, Population, and GDP Structure'; headerRow.getCell(1).font = { name: 'Segoe UI Light', size: 22 }; headerRow.getCell(1).alignment = { horizontal: 'center' }; // footer const footerRowIndex = cellRange.to.row + 2; const footerRow = worksheet.getRow(footerRowIndex); worksheet.mergeCells(footerRowIndex, 1, footerRowIndex, 8); footerRow.getCell(1).value = 'www.wikipedia.org'; footerRow.getCell(1).font = { color: { argb: 'BFBFBF' }, italic: true }; footerRow.getCell(1).alignment = { horizontal: 'right' }; }).then(() => { workbook.xlsx.writeBuffer().then((buffer) => { saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'CountriesPopulation.xlsx'); }); }); e.cancel = true; }; </script> <style> #grid sup { font-size: 0.8em; vertical-align: super; line-height: 0; } .long-title h3 { font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana; font-weight: 200; font-size: 28px; text-align: center; margin-bottom: 20px; } </style>
window.exports = window.exports || {}; window.config = { transpiler: 'plugin-babel', meta: { '*.vue': { loader: 'vue-loader', }, '*.ts': { loader: 'demo-ts-loader', }, '*.svg': { loader: 'svg-loader', }, 'devextreme/time_zone_utils.js': { 'esModule': true, }, 'devextreme/localization.js': { 'esModule': true, }, 'devextreme/viz/palette.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.2.5/cjs', 'devextreme-vue': 'npm:devextreme-vue@23.2.5/cjs', 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.6.4/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.5/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.51/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);
export type Country = { ID: number; Country: string; Area: number; Population_Urban: number; Population_Rural: number; Population_Total: number; GDP_Agriculture: number; GDP_Industry: number; GDP_Services: number; GDP_Total: number; }; export const countries: Country[] = [{ ID: 1, Country: 'Brazil', Area: 8515767, Population_Urban: 0.85, Population_Rural: 0.15, Population_Total: 205809000, GDP_Agriculture: 0.054, GDP_Industry: 0.274, GDP_Services: 0.672, GDP_Total: 2353025, }, { ID: 2, Country: 'China', Area: 9388211, Population_Urban: 0.54, Population_Rural: 0.46, Population_Total: 1375530000, GDP_Agriculture: 0.091, GDP_Industry: 0.426, GDP_Services: 0.483, GDP_Total: 10380380, }, { ID: 3, Country: 'France', Area: 675417, Population_Urban: 0.79, Population_Rural: 0.21, Population_Total: 64529000, GDP_Agriculture: 0.019, GDP_Industry: 0.183, GDP_Services: 0.798, GDP_Total: 2846889, }, { ID: 4, Country: 'Germany', Area: 357021, Population_Urban: 0.75, Population_Rural: 0.25, Population_Total: 81459000, GDP_Agriculture: 0.008, GDP_Industry: 0.281, GDP_Services: 0.711, GDP_Total: 3859547, }, { ID: 5, Country: 'India', Area: 3287590, Population_Urban: 0.32, Population_Rural: 0.68, Population_Total: 1286260000, GDP_Agriculture: 0.174, GDP_Industry: 0.258, GDP_Services: 0.569, GDP_Total: 2047811, }, { ID: 6, Country: 'Italy', Area: 301230, Population_Urban: 0.69, Population_Rural: 0.31, Population_Total: 60676361, GDP_Agriculture: 0.02, GDP_Industry: 0.242, GDP_Services: 0.738, GDP_Total: 2147952, }, { ID: 7, Country: 'Japan', Area: 377835, Population_Urban: 0.93, Population_Rural: 0.07, Population_Total: 126920000, GDP_Agriculture: 0.012, GDP_Industry: 0.275, GDP_Services: 0.714, GDP_Total: 4616335, }, { ID: 8, Country: 'Russia', Area: 17098242, Population_Urban: 0.74, Population_Rural: 0.26, Population_Total: 146544710, GDP_Agriculture: 0.039, GDP_Industry: 0.36, GDP_Services: 0.601, GDP_Total: 1857461, }, { ID: 9, Country: 'United States', Area: 9147420, Population_Urban: 0.81, Population_Rural: 0.19, Population_Total: 323097000, GDP_Agriculture: 0.0112, GDP_Industry: 0.191, GDP_Services: 0.797, GDP_Total: 17418925, }, { ID: 10, Country: 'United Kingdom', Area: 244820, Population_Urban: 0.82, Population_Rural: 0.18, Population_Total: 65097000, GDP_Agriculture: 0.007, GDP_Industry: 0.21, GDP_Services: 0.783, GDP_Total: 2945146, }];
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.2.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.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@4.2.4/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.ts"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div class="long-title"> <h3>Country Area, Population, and GDP Structure</h3> </div> <div id="app"></div> </div> </body> </html>