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:
- Merged cells
- Cell values formatting
- Font properties
- Text alignment
www.wikipedia.org
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
$(function(){
$('#gridContainer').dxDataGrid({
dataSource: countries,
keyExpr: "ID",
showBorders: true,
export: {
enabled: true
},
onExporting: function(e) {
var workbook = new ExcelJS.Workbook();
var worksheet = workbook.addWorksheet('CountriesPopulation');
DevExpress.excelExporter.exportDataGrid({
component: e.component,
worksheet: worksheet,
topLeftCell: { row: 4, column: 1 }
}).then(function(cellRange) {
// header
var 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
var footerRowIndex = cellRange.to.row + 2;
var 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(function() {
workbook.xlsx.writeBuffer().then(function(buffer) {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'CountriesPopulation.xlsx');
});
});
e.cancel = true;
},
columns: [
'Country',
'Area',
{
caption: 'Population',
columns: [{
caption: 'Total',
dataField: 'Population_Total',
format: 'fixedPoint'
}, {
caption: 'Urban',
dataField: 'Population_Urban',
dataType: 'number',
format: { type: 'percent'}
}]
}, {
caption: 'Nominal GDP',
columns: [{
caption: 'Total, mln $',
dataField: 'GDP_Total',
format: 'fixedPoint',
sortOrder: 'desc'
}, {
caption: 'By Sector',
columns: [{
caption: 'Agriculture',
dataField: 'GDP_Agriculture',
width: 95,
format: {
type: 'percent',
precision: 1
}
}, {
caption: 'Industry',
dataField: 'GDP_Industry',
width: 80,
format: {
type: 'percent',
precision: 1
}
}, {
caption: 'Services',
dataField: 'GDP_Services',
width: 85,
format: {
type: 'percent',
precision: 1
}
}]
}]
}
]
});
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<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" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.0/polyfill.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/3.3.1/exceljs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.4/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/21.1.4/js/dx.all.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="data.js"></script>
<script src="index.js"></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="gridContainer"></div>
</div>
</body>
</html>
#gridContainer 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;
}
var countries = [{
"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
}];