Export
28 Sep 202315 minutes to read
Pdf export in Angular Gantt component
PDF export allows exporting Gantt data to PDF document. You need to use the pdfExport
method for exporting. To enable PDF export in the Gantt, set the allowPdfExport
to true.
To export data to PDF document, inject the PdfExport
module in Gantt.
Note: Currently, we do not have support for exporting manually scheduled tasks.
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { GanttComponent, ToolbarItem, SelectionSettingsModel } from '@syncfusion/ej2-angular-gantt';
import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
import { editingData } from './data';
@Component({
selector: 'app-root',
template:
`<ejs-gantt #gantt id="ganttDefault" height="430px" [dataSource]="data" [taskFields]="taskSettings" [toolbar]="toolbar"
(toolbarClick)="toolbarClick($event)" allowPdfExport='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 ganttChart?: GanttComponent;
public ngOnInit(): void {
this.data = editingData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
this.toolbar = ['PdfExport'];
}
public toolbarClick(args: ClickEventArgs): void {
if (args.item.id === 'ganttDefault_pdfexport') {
this.ganttChart!.pdfExport();
}
};
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GanttModule } from '@syncfusion/ej2-angular-gantt';
import { ToolbarService, PdfExportService, SelectionService } from '@syncfusion/ej2-angular-gantt';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, GanttModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ToolbarService, PdfExportService, SelectionService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Exporting Gantt data as a blob object
In Gantt, you can export the Gantt chart data as a blob object, which allows you to preview or modify the data before exporting it.
To export the Gantt chart data as a blob object, follow these steps:
step 1: pdfExport fourth argument set as true
.
step 2: Then , pdfExpComplete
return as blob object.
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { Gantt, Toolbar, PdfExport, Selection, ExcelExportService, PdfExportService,
ToolbarService, ToolbarItem, GanttComponent } from '@syncfusion/ej2-angular-gantt';
import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
import { ExcelExportCompleteArgs, PdfExportCompleteArgs, SelectionSettingsModel } from '@syncfusion/ej2-angular-grids';
import { editingData } from './data';
@Component({
selector: 'app-root',
template:
`<ejs-gantt #gantt id="ganttDefault" height="430px" [dataSource]="data" [taskFields]="taskSettings" [toolbar]="toolbar"
(toolbarClick)="toolbarClick($event)" (excelExportComplete)='excelExpComplete($event)' (pdfExportComplete)='pdfExpComplete($event)' allowPdfExport='true' allowExcelExport='true' [treeColumnIndex]="1"></ejs-gantt>`,
encapsulation: ViewEncapsulation.None,
providers: [ToolbarService, ExcelExportService, PdfExportService]
})
export class AppComponent{
// Data for Gantt
public data?: object[];
public taskSettings?: object;
public toolbar?: ToolbarItem[];
@ViewChild('gantt', {static: true})
public ganttChart?: GanttComponent;
public ngOnInit(): void {
this.data = editingData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
this.toolbar = ['PdfExport','ExcelExport'];
}
public toolbarClick(args: ClickEventArgs): void {
if (args.item.id === 'ganttDefault_pdfexport') {
this.ganttChart!.pdfExport(undefined,undefined,undefined,true);
}
if (args.item.id === 'ganttDefault_excelexport') {
this.ganttChart!.excelExport(undefined,undefined,undefined,true);
}
};
excelExpComplete(args: ExcelExportCompleteArgs) {
// This event will be triggered when excel exporting.
args.promise!.then((e: { blobData: Blob }) => {
// In this `then` function, we can get blob data through the arguments after promise resolved.
this.exportBlob(e.blobData);
});
}
pdfExpComplete(args: PdfExportCompleteArgs) {
// This event will be triggered when pdf exporting.
args.promise!.then((e: { blobData: Blob }) => {
// In this `then` function, we can get blob data through the arguments after promise resolved.
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 as any).createobjectURL(blob);
a.href = url;
a.download = 'Export';
a.click();
(window.URL as any).revokeobjectURL(url);
document.body.removeChild(a);
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GanttModule ,ExcelExportService,ExcelExport, GanttAllModule} from '@syncfusion/ej2-angular-gantt';
import { ToolbarService, PdfExportService, SelectionService } from '@syncfusion/ej2-angular-gantt';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, GanttModule,GanttAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ToolbarService, PdfExportService, SelectionService, ExcelExportService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Single page exporting in gantt
In Gantt, we have provided support to export the Gantt component where each rows are auto-fit to the PDF document page width by setting isFitToWidth
as true in fitToWidthSettings
of PdfExportProperties
.
Also, we can customize the chart width and grid width in exported file using chartWidth
and gridWidth
by defining it as percentage in string.
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { GanttComponent, ToolbarItem, PdfExportProperties } from '@syncfusion/ej2-angular-gantt';
import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
import { editingData } from './data';
@Component({
selector: 'app-root',
template:
`<ejs-gantt #gantt id="ganttDefault" height="430px" [dataSource]="data" [taskFields]="taskSettings" [toolbar]="toolbar"
(toolbarClick)="toolbarClick($event)" allowPdfExport='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 ganttChart?: GanttComponent;
public ngOnInit(): void {
this.data = editingData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks',
};
this.toolbar = ['PdfExport'];
}
public toolbarClick(args: ClickEventArgs): void {
if (args.item.id === 'ganttDefault_pdfexport') {
let exportProperties: PdfExportProperties = {
fitToWidthSettings: {
isFitToWidth: true,
}
};
this.ganttChart!.pdfExport(exportProperties);
}
};
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GanttModule } from '@syncfusion/ej2-angular-gantt';
import { ToolbarService, PdfExportService, SelectionService } from '@syncfusion/ej2-angular-gantt';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, GanttModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ToolbarService, PdfExportService, SelectionService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);