Excel export in Angular Gantt component

18 Oct 202524 minutes to read

The Syncfusion Angular Gantt component supports exporting project data to Excel and CSV formats, enabling seamless sharing, reporting, and offline analysis.

To enable Excel or CSV export functionality, set the allowExcelExport property to true and inject the ExcelExportService into the component’s providers array.

You can trigger export operations using the excelExport or csvExport methods, typically within the toolbarClick event.

import { GanttModule, GanttComponent, ToolbarItem,ToolbarService, ExcelExportService, SelectionService } from '@syncfusion/ej2-angular-gantt'
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
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="370px" [dataSource]="data" [taskFields]="taskSettings" [toolbar]="toolbar" (toolbarClick)="toolbarClick($event)" allowExcelExport='true'>
       </ejs-gantt>`,
    encapsulation: ViewEncapsulation.None
})

export class AppComponent implements OnInit{
    @ViewChild('gantt', {static: true}) public ganttInstance?: GanttComponent;
    public data?: object[];
    public taskSettings?: object;
    public toolbar?: ToolbarItem[];

    public ngOnInit(): void {
        this.data = GanttData;
        this.taskSettings = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            parentID:'ParentID',
        };
        this.toolbar =  ['ExcelExport','CsvExport'];
    }
    
    public toolbarClick(args: ClickEventArgs): void {
        if (args.item.id === 'ganttDefault_excelexport') {
          (this.ganttInstance as GanttComponent).excelExport();
        } else if(args.item.id === 'ganttDefault_csvexport') {
          (this.ganttInstance as GanttComponent).csvExport();
        }
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
/**
 * Gantt DataSource
 */

export let GanttData: Object[]  = [
    {
        TaskID: 1,
        TaskName: 'Project Initiation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
    },
    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 90 },
    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: 2, ParentID: 1, Progress: 40 },
    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 10 },
    {
        TaskID: 5,
        TaskName: 'Project Estimation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
    },
    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 85 },
    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 15 },
    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 70 }
];

Binding custom data source while exporting

You can bind a custom data source for Excel or CSV export in the Angular Gantt component by assigning it dynamically before the export begins. To achieve this, set the required data to the dataSource property within the ExcelExportProperties configuration.

import { GanttAllModule } from '@syncfusion/ej2-angular-gantt'
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { GanttComponent, ToolbarItem } from '@syncfusion/ej2-angular-gantt';
import { ExcelExportProperties } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { editingData } from './data';

@Component({
    imports: [GanttAllModule],
    standalone: true,
    selector: 'app-root',
    template:
        `<ejs-gantt #gantt id="ganttDefault" height="430px" [dataSource]="data" [taskFields]="taskSettings" [toolbar]="toolbar" (toolbarClick)="toolbarClick($event)" allowExcelExport='true' [treeColumnIndex]="1">
       </ejs-gantt>`,
    encapsulation: ViewEncapsulation.None
})

export class AppComponent implements OnInit {
    @ViewChild('gantt', { static: true }) public ganttInstance?: GanttComponent;
    public data?: object[];
    public taskSettings?: object;
    public toolbar?: ToolbarItem[];

    public ngOnInit(): void {
        this.data = editingData;
        this.taskSettings = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            parentID: 'ParentID',
        };
        this.toolbar = ['ExcelExport'];
    }
    
    public toolbarClick(args: ClickEventArgs): void {
        if (args.item.id === 'ganttDefault_excelexport') {
            let excelExportProperties: ExcelExportProperties = {
                dataSource: editingData.slice(0, 4)
            };
            (this.ganttInstance as GanttComponent).excelExport(excelExportProperties);
        }
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let editingData: Object[] = [
    {
        TaskID: 1,
        TaskName: 'Project Initiation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
    },
    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 90 },
    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: 2, ParentID: 1, Progress: 40 },
    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 10 },
    {
        TaskID: 5,
        TaskName: 'Project Estimation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
    },
    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 85 },
    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 15 },
    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 70 }
];

Exporting with cell and row spanning

To export merged cells and rows in Excel or CSV files using the Angular Gantt component, handle the excelQueryCellInfo event and apply rowSpan and colSpan during the export process. The queryCellInfo event can be used to customize cell rendering within the Gantt view.

import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import {GanttModule, GanttComponent, ToolbarItem, ToolbarService, ExcelExportService, SelectionService } from '@syncfusion/ej2-angular-gantt';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { Column, ExcelQueryCellInfoEventArgs, QueryCellInfoEventArgs } from '@syncfusion/ej2-angular-grids';
import { GanttData } from './data';

@Component({
    imports: [ GanttModule],
    providers: [ToolbarService, ExcelExportService, SelectionService],
    standalone: true,
    selector: 'app-root',
  template: `
    <ejs-gantt #gantt id="ganttDefault" height="450px" [dataSource]="data" [taskFields]="taskSettings" [toolbar]="toolbar" allowExcelExport="true" (toolbarClick)="toolbarClick($event)" (queryCellInfo)="queryCellInfoEvent($event)" (excelQueryCellInfo)="excelQueryCellInfo($event)">
    </ejs-gantt>`,
  encapsulation: ViewEncapsulation.None,
})

export class AppComponent implements OnInit {
  @ViewChild('gantt', { static: true }) public ganttInstance?: GanttComponent;
  public data?: object[];
  public taskSettings?: object;
  public toolbar?: ToolbarItem[];

  ngOnInit(): void {
    this.data = GanttData;
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      duration: 'Duration',
      progress: 'Progress',
      parentID: 'ParentID'
    };
    this.toolbar = ['ExcelExport'];
  }

  public toolbarClick(args: ClickEventArgs): void {
    if (args.item.id === 'ganttDefault_excelexport') {
      this.ganttInstance?.excelExport();
    } else if (args.item.id === 'ganttDefault_csvexport') {
      this.ganttInstance?.csvExport();
    }
  }

  public queryCellInfoEvent(args:  ExcelQueryCellInfoEventArgs): void {
    const data = args.data as GanttTask;
    if (data.TaskID === 4 && args.column.field === 'TaskName') {
      (args as any).rowSpan = 2;
    }
    if (data.TaskID === 6 && args.column.field === 'TaskName') {
      args.colSpan = 2;
    }
  }

  public excelQueryCellInfo(args: QueryCellInfoEventArgs): void {
    const data = args.data as GanttTask;
    if (data.TaskID === 4 && (args.column as Column).field === 'TaskName') {
      args.rowSpan = 2;
    }
    if (data.TaskID === 6 && (args.column as Column).field === 'TaskName') {
      args.colSpan = 2;
    }
  }
}

interface GanttTask {
  TaskID: number;
  TaskName: string;
  StartDate: Date;
  Duration: number;
  Progress: number;
  ParentID?: number;
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export const GanttData: object[] = [
  { TaskID: 1, TaskName: 'Planning', StartDate: new Date('2025-09-01'), Duration: 5, Progress: 100 },
  { TaskID: 2, TaskName: 'Design', StartDate: new Date('2025-09-06'), Duration: 3, Progress: 60, ParentID: 1 },
  { TaskID: 3, TaskName: 'Development', StartDate: new Date('2025-09-10'), Duration: 10, Progress: 30, ParentID: 1 },
  { TaskID: 4, TaskName: 'Soil Test Approval', StartDate: new Date('2025-09-21'), Duration: 2, Progress: 80 },
  { TaskID: 5, TaskName: 'Foundation', StartDate: new Date('2025-09-24'), Duration: 4, Progress: 50, ParentID: 4 },
  { TaskID: 6, TaskName: 'Structure', StartDate: new Date('2025-09-29'), Duration: 6, Progress: 40, ParentID: 4 }
];

Show spinner while exporting

To indicate progress during the export operation in the Angular Gantt component, use the showSpinner method within the toolbarClick event when initiating Excel or CSV export. After the export process completes, hide the spinner by calling the hideSpinner method inside the excelExportComplete event.

import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { GanttModule, GanttComponent, ToolbarItem, ToolbarService, ExcelExportService, SelectionService } from '@syncfusion/ej2-angular-gantt';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ExcelExportCompleteArgs } from '@syncfusion/ej2-angular-grids';
import { GanttData } from './data';

@Component({
  imports: [GanttModule],
  providers: [ToolbarService, ExcelExportService, SelectionService],
  standalone: true,
  selector: 'app-root',
  template: `
    <ejs-gantt #gantt id="ganttDefault" height="450px" [dataSource]="data" [taskFields]="taskSettings" [toolbar]="toolbar" allowExcelExport="true" (toolbarClick)="toolbarClick($event)" (excelExportComplete)='excelExportComplete($event)' >
    </ejs-gantt>`,
  encapsulation: ViewEncapsulation.None,
})

export class AppComponent implements OnInit {
  @ViewChild('gantt', { static: true }) public ganttInstance?: GanttComponent;
  public data?: object[];
  public taskSettings?: object;
  public toolbar?: ToolbarItem[];

  ngOnInit(): void {
    this.data = GanttData;
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      duration: 'Duration',
      progress: 'Progress',
      parentID: 'ParentID'
    };
    this.toolbar = ['ExcelExport'];
  }

  toolbarClick(args: ClickEventArgs): void {
    if (args.item.id === 'ganttDefault_excelexport') {
      (this.ganttInstance as GanttComponent).showSpinner();
      setTimeout(() => {
        this.ganttInstance?.excelExport();
      }, 2000); // 2-second delay to observe spinner.

    }
  }

  public excelExportComplete(args: ExcelExportCompleteArgs): void {
    (this.ganttInstance as GanttComponent).hideSpinner();
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export const GanttData: object[] = [
  { TaskID: 1, TaskName: 'Planning', StartDate: new Date('2025-09-01'), Duration: 5, Progress: 100 },
  { TaskID: 2, TaskName: 'Design', StartDate: new Date('2025-09-06'), Duration: 3, Progress: 60, ParentID: 1 },
  { TaskID: 3, TaskName: 'Development', StartDate: new Date('2025-09-10'), Duration: 10, Progress: 30, ParentID: 1 },
  { TaskID: 4, TaskName: 'Soil Test Approval', StartDate: new Date('2025-09-21'), Duration: 2, Progress: 80 },
  { TaskID: 5, TaskName: 'Foundation', StartDate: new Date('2025-09-24'), Duration: 4, Progress: 50, ParentID: 4 },
  { TaskID: 6, TaskName: 'Structure', StartDate: new Date('2025-09-29'), Duration: 6, Progress: 40, ParentID: 4 }
];

Exporting with custom date format

To apply a custom date format to columns during Excel or CSV export in the Angular Gantt component, define the desired format using the format property in the column configuration.

import { GanttModule, GanttComponent, ToolbarItem,ToolbarService, ExcelExportService, SelectionService } from '@syncfusion/ej2-angular-gantt'
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
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" (toolbarClick)="toolbarClick($event)" allowExcelExport='true' [toolbar]="toolbar"  [taskFields]="taskSettings" [treeColumnIndex]='1'>
          <e-columns>
              <e-column field='TaskID' headerText='Task ID' textAlign='Right' width=90 type='number'></e-column>
              <e-column field='TaskName' headerText='Task Name' textAlign='Left' width=270 type='string'></e-column>
              <e-column field='StartDate' headerText='Start Date' textAlign='Right' width=150 [format]='formatOptions' ></e-column>
              <e-column field='Duration' headerText='Duration' textAlign='Right' width=90 type='number'></e-column>
              <e-column field='Progress' headerText='Progress' textAlign='Right' width=120 type='number'></e-column>
          </e-columns>
       </ejs-gantt>`,
    encapsulation: ViewEncapsulation.None
})

export class AppComponent implements OnInit{
    @ViewChild('gantt', {static: true}) public ganttInstance?: GanttComponent;
    public data?: object[];
    public taskSettings?: object;
    public toolbar?: ToolbarItem[];
    public formatOptions?: object;

    public ngOnInit(): void {
        this.data = GanttData;
        this.taskSettings = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            parentID:'ParentID',
        };
        this.formatOptions = { type: 'date', format: "dd/MM/yyyy" };
        this.toolbar =  ['ExcelExport','CsvExport'];
    }
    
    public toolbarClick(args: ClickEventArgs): void {
        if (args.item.id === 'ganttDefault_excelexport') {
          (this.ganttInstance as GanttComponent).excelExport();
        } 
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
/**
 * Gantt DataSource
 */

export let GanttData: Object[]  = [
    {
        TaskID: 1,
        TaskName: 'Project Initiation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
    },
    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 90 },
    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: 2, ParentID: 1, Progress: 40 },
    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 10 },
    {
        TaskID: 5,
        TaskName: 'Project Estimation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
    },
    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 85 },
    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 15 },
    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 70 }
];

Exporting multiple Gantt charts

The Angular Gantt component supports exporting multiple Gantt charts either into a single worksheet or across separate sheets when generating Excel or CSV files.

Same sheet

To export multiple datasets into a single worksheet, set multipleExport.type to AppendToSheet within the ExcelExportProperties configuration. To add spacing between datasets, define the number of blank rows using the multipleExport.blankRows property.

import { Component, ViewEncapsulation, ViewChild, OnInit } from '@angular/core';
import { GanttComponent, GanttAllModule, ToolbarItem } from '@syncfusion/ej2-angular-gantt';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ExcelExportProperties } from '@syncfusion/ej2-angular-grids';
import { GanttData } from './data';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GanttAllModule],
  template: `
    <p><b>First Gantt:</b></p>
    <ejs-gantt #gantt1 id="ganttDefault1" height="280px" [dataSource]="firstDatasource" [taskFields]="firstTaskSettings" [toolbar]="toolbar" (toolbarClick)="toolbarClick($event)" allowExcelExport="true" [treeColumnIndex]="1">
    </ejs-gantt>
    <p><b>Second Gantt:</b></p>
    <ejs-gantt #gantt2 id="ganttDefault2" height="250px" [dataSource]="seconDatasource" [taskFields]="secondTaskSettings" allowExcelExport="true" [treeColumnIndex]="1"></ejs-gantt>`,
  encapsulation: ViewEncapsulation.None
})

export class AppComponent implements OnInit {
  @ViewChild('gantt1', { static: true }) public firtGanttInstance?: GanttComponent;
  @ViewChild('gantt2', { static: true }) public secondGanttInstance?: GanttComponent;
  public firstDatasource?: object[];
  public seconDatasource?: object[];
  public firstTaskSettings?: object;
  public secondTaskSettings?: object;
  public toolbar?: ToolbarItem[];

  ngOnInit(): void {
    this.firstDatasource = GanttData.slice(0, 5);
    this.seconDatasource = GanttData.slice(4, 8);
    this.firstTaskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      duration: 'Duration',
      progress: 'Progress',
      parentID: 'ParentID'
    };
    this.secondTaskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      duration: 'Duration',
      progress: 'Progress',
      parentID: 'ParentID'
    };
    this.toolbar = ['ExcelExport'];
  }

  public toolbarClick(args: ClickEventArgs): void {
    if (args.item.id === 'ganttDefault1_excelexport') {
      const exportProps: ExcelExportProperties = {
        multipleExport: { type: 'AppendToSheet', blankRows: 2 }
      };
      const firstExport = (this.firtGanttInstance as GanttComponent).excelExport(exportProps, true);
      firstExport.then((firstSheetData: any) => {
        (this.secondGanttInstance as GanttComponent).excelExport(exportProps, false, firstSheetData);
      });
    }
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
/**
 * Gantt DataSource
 */

export let GanttData: Object[]  = [
    {
        TaskID: 1,
        TaskName: 'Project Initiation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
    },
    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 90 },
    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: 2, ParentID: 1, Progress: 40 },
    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 10 },
    {
        TaskID: 5,
        TaskName: 'Project Estimation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
    },
    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 85 },
    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 15 },
    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 70 }
];

By default, multipleExport.blankRows value is 5.

New sheet

To export each Gantt to a separate worksheet, set multipleExport.type to NewSheet in the ExcelExportProperties configuration. This ensures each dataset is placed on its own sheet.

import { Component, ViewEncapsulation, ViewChild, OnInit } from '@angular/core';
import { GanttComponent, GanttAllModule, ToolbarItem } from '@syncfusion/ej2-angular-gantt';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ExcelExportProperties } from '@syncfusion/ej2-grids';
import { GanttData } from './data';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GanttAllModule],
  template: `
    <p><b>First Gantt:</b></p>
    <ejs-gantt #gantt1 id="ganttDefault1" height="280px" [dataSource]="firstDatasource" [taskFields]="firstTaskSettings" [toolbar]="toolbar" (toolbarClick)="toolbarClick($event)" allowExcelExport="true" [treeColumnIndex]="1">
    </ejs-gantt>
    <p><b>Second Gantt:</b></p>
    <ejs-gantt #gantt2 id="ganttDefault2" height="250px" [dataSource]="seconDatasource" [taskFields]="secondTaskSettings" allowExcelExport="true" [treeColumnIndex]="1"></ejs-gantt>`,
  encapsulation: ViewEncapsulation.None
})

export class AppComponent implements OnInit {
  @ViewChild('gantt1', { static: true }) public firstGanttInstance?: GanttComponent;
  @ViewChild('gantt2', { static: true }) public secondGanttInstance?: GanttComponent;
  public firstDatasource?: object[];
  public seconDatasource?: object[];
  public firstTaskSettings?: object;
  public secondTaskSettings?: object;
  public toolbar?: ToolbarItem[];

  ngOnInit(): void {
    this.firstDatasource = GanttData.slice(0, 5);
    this.seconDatasource = GanttData.slice(4, 8);
    this.firstTaskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      duration: 'Duration',
      progress: 'Progress',
      parentID: 'ParentID'
    };
    this.secondTaskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      duration: 'Duration',
      progress: 'Progress',
      parentID: 'ParentID'
    };
    this.toolbar = ['ExcelExport'];
  }

  public toolbarClick(args: ClickEventArgs): void {
    if (args.item.id === 'ganttDefault1_excelexport') {
      const appendExcelExportProperties: ExcelExportProperties = {
        multipleExport: { type: 'NewSheet' }
      }; 
      const firstGanttExport: Promise<any> = (this.firstGanttInstance as GanttComponent).excelExport(appendExcelExportProperties, true);
      firstGanttExport.then((fData: any) => {
        (this.secondGanttInstance as GanttComponent).excelExport(appendExcelExportProperties, false, fData);
      });
    }
  };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
/**
 * Gantt DataSource
 */

export let GanttData: Object[]  = [
    {
        TaskID: 1,
        TaskName: 'Project Initiation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
    },
    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 90 },
    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: 2, ParentID: 1, Progress: 40 },
    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 10 },
    {
        TaskID: 5,
        TaskName: 'Project Estimation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
    },
    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 85 },
    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 15 },
    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 70 }
];

Export Gantt data as a Blob

To export Gantt data as a Blob object for advanced processing or custom download workflows, set the isBlob parameter to true in the excelExport or csvExport method. Use the excelExportComplete event to access the Blob and implement custom logic.

import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { GanttAllModule, GanttComponent, ToolbarItem } from '@syncfusion/ej2-angular-gantt';
import { ExcelExportCompleteArgs } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { GanttData } from './data';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GanttAllModule],
  template: `
    <ejs-gantt #gantt id="ganttDefault" height="370px" [dataSource]="data" [taskFields]="taskSettings" [columns]="columns"
    [toolbar]="toolbar" (toolbarClick)="toolbarClick($event)"(excelExportComplete)="excelExportComplete($event)" [allowExcelExport]="true" [treeColumnIndex]="1">
    </ejs-gantt>`,
  encapsulation: ViewEncapsulation.None
})

export class AppComponent implements OnInit {
  @ViewChild('gantt', { static: true }) public ganttInstance!: GanttComponent;
  public data: object[] = [];
  public taskSettings: object = {};
  public toolbar: ToolbarItem[] = [];
  public columns: object[] = [];

  ngOnInit(): void {
    this.data = GanttData;
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      duration: 'Duration',
      progress: 'Progress',
      parentID: 'ParentID',
    };
    this.columns = [
      { field: 'TaskID', headerText: 'Task ID', width: '100' },
      { field: 'TaskName', headerText: 'Task Name', width: '150' },
      { field: 'StartDate', headerText: 'Start Date', width: '150', visible: false },
      { field: 'Duration', headerText: 'Duration', width: '150' },
      { field: 'Progress', headerText: 'Progress', width: '150' },
    ];
    this.toolbar = ['ExcelExport', 'CsvExport'];
  }
  public toolbarClick(args: ClickEventArgs): void {
    if (args.item.id === 'ganttDefault_excelexport') {

      this.ganttInstance!.excelExport(undefined, undefined, undefined, true);
    }
    if (args.item.id === 'ganttDefault_csvexport') {
      this.ganttInstance.csvExport(undefined, undefined, undefined, true);
    }
  }

  public excelExportComplete(args: ExcelExportCompleteArgs): void {
    if (args && args.promise) {
      // execute the promise to get the blob data.
      args.promise.then((e: { blobData: Blob }) => {
        this.exportBlob(e.blobData);
      });
    }
  }

  public exportBlob = (blob: Blob) => {
    const a: HTMLAnchorElement = document.createElement('a');
    document.body.appendChild(a);
    a.style.display = 'none';
    const url: string = window.URL.createObjectURL(blob);
    a.href = url;
    a.download = 'Export';
    a.click();
    window.URL.revokeObjectURL(url);
    document.body.removeChild(a);
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
/**
 * Gantt DataSource
 */

export let GanttData: Object[]  = [
    {
        TaskID: 1,
        TaskName: 'Project Initiation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
    },
    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 90 },
    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: 2, ParentID: 1, Progress: 40 },
    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 10 },
    {
        TaskID: 5,
        TaskName: 'Project Estimation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
    },
    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 85 },
    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 15 },
    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 70 }
];