# gantt-exporting

> Gantt chart sample demonstrating export of project data to Excel and PDF formats.

**Framework:** angular  **Component:** Gantt  **Variant:** exporting

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/angular/gantt-exporting.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-angular-gantt
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/gantt-exporting/exporting.component.ts

```typescript
import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { editingData, editingResources } from '../data';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';
import { GanttComponent, PdfExportProperties, GanttModule, PdfExportService, ExcelExportService, ToolbarService, DayMarkersService, SelectionService } from '@syncfusion/ej2-angular-gantt';
import { SwitchAllModule } from '@syncfusion/ej2-angular-buttons';

@Component({
    selector: 'ej2-ganttexporting',
    templateUrl: 'exporting.html',
    encapsulation: ViewEncapsulation.None,
    standalone: true,
    providers: [PdfExportService, ExcelExportService, ToolbarService, DayMarkersService, SelectionService],
    imports: [ SwitchAllModule, GanttModule]
})
export class GanttExportingComponent implements OnInit {
    @ViewChild('ganttExcel')
    public ganttObj!: GanttComponent;
    public data!: object[];
    public resources!: object[];
    public resourceFields!: object ;
    public taskSettings!: object;
    public timelineSettings!: object;
    public gridLines!: string;
    public labelSettings!: object;
    public projectStartDate!: Date;
    public projectEndDate!: Date;
    public toolbar!: string[];
    public splitterSettings!: object;
    public columns!: object[];
    public eventMarkers!: object[];
    public holidays!: object[];
    public ngOnInit(): void {
        this.data = editingData;
        this.taskSettings = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            dependency: 'Predecessor',
            parentID: 'ParentID',
            resourceInfo: 'resources'
        };
        this.resourceFields = {
            id: 'resourceId',
            name: 'resourceName'
        };
        this.toolbar = ['ExcelExport', 'CsvExport', 'PdfExport'];
        this.timelineSettings = {
            topTier: {
                unit: 'Week',
                format: 'MMM dd, y',
            },
            bottomTier: {
                unit: 'Day',
                count: 1
            },
        };
        this.gridLines = 'Both';
        this.labelSettings = {
            leftLabel: 'TaskName'
        };
        this.projectStartDate = new Date('03/26/2025');
        this.projectEndDate = new Date('09/01/2025');
        this.resources = editingResources;
        this.splitterSettings = {
            position: "35%"
        };
        this.columns = [
            { field: 'TaskID', width: 80 },
            { field: 'TaskName', width: 250 }
        ];
    }
    toolbarClick(args: ClickEventArgs): void {
        if (args.item.id === 'GanttExport_excelexport') {
            this.ganttObj.excelExport();
        }
        else if (args.item.id === "GanttExport_csvexport") {
            this.ganttObj.csvExport();
        }
        else if (args.item.id === "GanttExport_pdfexport") {
          this.ganttObj.pdfExport();
        }
    }
}

```

### src/components/gantt-exporting/exporting.html

```html

<div class="control-section">
  <ejs-gantt id="GanttExport" #ganttExcel height="650px" rowHeight="46" taskbarHeight="25" [dataSource]="data"
    [taskFields]="taskSettings" [timelineSettings]="timelineSettings" [labelSettings]="labelSettings"
    [treeColumnIndex]="1" [allowExcelExport]="true" [allowPdfExport]="true" [allowSelection]="true"
    dateFormat="MMM dd, y" [projectStartDate]="projectStartDate" [projectEndDate]="projectEndDate"
    [highlightWeekends]="true" [holidays]="holidays" [gridLines]="gridLines" [toolbar]="toolbar"
    [resourceFields]="resourceFields" [eventMarkers]="eventMarkers" [resources]="resources"
    (toolbarClick)="toolbarClick($event)" [splitterSettings]="splitterSettings" [columns]="columns">
  </ejs-gantt>
</div>

```