Excel export in Angular Gantt component
27 Apr 20243 minutes to read
Gantt supports client-side exporting, which allows you to export its data to the Excel and CSV formats. Use the excelExport
and csvExport
methods for exporting. To enable Excel export in the Gantt, set the allowExcelExport
to true.
To export data to Excel and CSV, inject the ExcelExportService
in the provider section of AppModule
.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GanttModule } from '@syncfusion/ej2-angular-gantt'
import { ToolbarService, ExcelExportService, SelectionService } from '@syncfusion/ej2-angular-gantt'
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { Gantt } from '@syncfusion/ej2-gantt';
import { GanttComponent, ToolbarItem } from '@syncfusion/ej2-angular-gantt';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { GanttData } from './data';
@Component({
imports: [
GanttModule
],
providers: [ToolbarService, ExcelExportService, SelectionService],
standalone: true,
selector: 'app-root',
template:
`<ejs-gantt #gantt id="ganttDefault" height="430px" [dataSource]="data" [taskFields]="taskSettings" [toolbar]="toolbar"
(toolbarClick)="toolbarClick($event)" allowExcelExport='true'></ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent{
// Data for Gantt
public data?: object[];
public taskSettings?: object;
public toolbar?: ToolbarItem[];
@ViewChild('gantt', {static: true})
public ganttObj?: GanttComponent;
public ngOnInit(): void {
this.data = GanttData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
this.toolbar = ['ExcelExport','CsvExport'];
}
public toolbarClick(args: ClickEventArgs): void {
if (args.item.id === 'ganttDefault_excelexport') {
this.ganttObj!.excelExport();
} else if(args.item.id === 'ganttDefault_csvexport') {
this.ganttObj!.csvExport();
}
};
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));