App.component.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { Workbook } from '@syncfusion/ej2-excel-export';
@Component({
selector: 'app-root',
template: `<p><b>First Grid:</b></p>
<ejs-grid #grid1 id='firstGrid' [dataSource]='fData' [toolbar]='toolbarOptions' [allowExcelExport]='true'
(toolbarClick)='toolbarClick($event)'>
<e-columns>
…
</e-columns>
</ejs-grid>
<p><b>Second Grid:</b></p>
<ejs-grid #grid2 id='secondGrid' [dataSource]='sData' [allowExcelExport]='true'>
<e-columns>
…
</e-columns>
</ejs-grid>
`
})
export class AppComponent implements OnInit {
public fData: object[];
public sData: object[];
public names: any ;
ngOnInit(): void {
this.fData = data.slice(0, 5);
this.names = ["OrderDetail", "EmployeeDetail"]; // here you can customize the sheet names
}
toolbarClick = (args: ClickEventArgs) => {
var firstGrid = (document.getElementById("firstGrid") as any).ej2_instances[0];
if (args.item.id === 'firstGrid_excelexport') {
var appendExcelExportProperties = {
multipleExport: { type: 'NewSheet' }
};
var Grids = [];
for (var i = 0; i < document.querySelectorAll(".e-grid").length; i++) {
var grid = (document.getElementById(document.querySelectorAll(".e-grid")[i].id) as any).ej2_instances[0];
Grids.push(grid);
}
if (Grids.length > 1) {
(appendExcelExportProperties.header.rows[0].cells[0] as any).value = this.names[0];
var firstGridExport = firstGrid.excelExport(appendExcelExportProperties, true).then(function (fData) {
fData.worksheets[0].name = this.names[0];
this.exportData = fData;
for (var j = 1; j < Grids.length - 1; j++) {
(appendExcelExportProperties.header.rows[0].cells[0] as any).value = this.names[1];
Grids[j].excelExport(appendExcelExportProperties, true, this.exportData).then(function (wb) {
(appendExcelExportProperties.header.rows[0].cells[0] as any).value = this.names[wb.worksheets.length];
this.exportData = wb;
if (this.exportData.worksheets.length === (Grids.length - 1)) {
for (var k = 0; k < this.exportData.worksheets.length; k++) {
if (!this.exportData.worksheets[k].name) {
this.exportData.worksheets[k].name = this.names[k]; //Sheet name is changed to the given string values
}
}
var lastGridExport = Grids[Grids.length - 1].excelExport(appendExcelExportProperties, true, this.exportData).then(function (wb) {
(appendExcelExportProperties.header.rows[0].cells[0] as any).value = this.names[this.names.length - 1];
wb.worksheets[wb.worksheets.length - 1].name = this.names[Grids.length - 1];
const book = new Workbook(wb, 'xlsx'); // Stores the changed name as workbook
book.save('Export.xlsx'); // Save the stored file in Excel format
}.bind(this));
}.bind(this));
}
|