Export
14 Mar 202424 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);
Indicators in PDF exporting
The PDF export functionality allows users to export Gantt charts enriched with dynamic indicators and accompanying images.
These indicators, represented by images,can be effortlessly defined using the base64
encoding value in the data object of datasource.This data object field should be mapped to indiactor property of task fields
.
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);
Exporting with templates
Exporting with column template
The PDF export functionality allows to export Grid columns that include images, hyperlinks, and custom text to an PDF document using pdfQueryCellInfo event.
In the following sample, the hyperlinks and images are exported to PDF using hyperlink and image properties in the pdfQueryCellInfo event.
Note: PDF Export supports base64 string to export the images.
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import {
GanttComponent,
ToolbarItem,
PdfExportProperties,
} from '@syncfusion/ej2-angular-gantt';
import { editingResources } from './data';
import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
@Component({
selector: 'app-root',
template: `<ejs-gantt #ganttDefault id="ganttDefault" height="430px" [dataSource]="data" [taskFields]="taskSettings" [toolbar]="toolbar" (pdfQueryCellInfo)="pdfQueryCellInfo($event)"
(toolbarClick)="toolbarClick($event)" allowPdfExport='true' [allowResizing] = 'true' rowHeight='50' [splitterSettings]="splitterSettings" [resourceFields]="resourceFields" [resources]="resources">
<e-columns>
<e-column field='TaskID' headerText='Task ID' textAlign= 'Left' width= 100></e-column>
<e-column field='TaskName' headerText= 'Task Name' width= 150></e-column>
<e-column field= 'resources' headerText= 'Resources' width= 250>
<ng-template #template let-data>
<div *ngIf="data.ganttProperties.resourceNames">
<img src=".png" style="height:40px;width:40px"/>
</div>
</ng-template>
</e-column>
<e-column field= 'EmailId' headerText='Email ID' width= 150 ></e-column>
</e-columns></ejs-gantt>`,
encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
public data?: object[];
public taskSettings?: object;
public splitterSettings?: object;
public resources?: object[];
public toolbar?: ToolbarItem[];
@ViewChild('ganttDefault', { static: true })
public ganttChart?: GanttComponent;
public resourceFields?: object;
public ngOnInit(): void {
this.data = [
{
TaskID: 1,
TaskName: 'Product concept',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
EmailId: 'MartinTamer@gmail.com',
subtasks: [
{
TaskID: 2,
TaskName: 'Defining the product and its usage',
StartDate: new Date('04/02/2019'),
Duration: 3,
Progress: 30,
resources: [2],
EmailId: 'RoseFuller@gmail.com',
resourcesImage:
'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',
},
{
TaskID: 3,
TaskName: 'Defining target audience',
StartDate: new Date('04/02/2019'),
Duration: 3,
resources: [3],
EmailId: 'MargaretBuchanan@gmail.com',
resourcesImage:
'/9j/4AAQSkZJRgABAQAAAQABAAD//gAfQ29tcHJlc3NlZCBieSBqcGVnLXJlY29tcHJlc3P/2wCEAAQEBAQEBAQEBAQGBgUGBggHBwcHCAwJCQkJCQwTDA4MDA4MExEUEA8QFBEeFxUVFx4iHRsdIiolJSo0MjRERFwBBAQEBAQEBAQEBAYGBQYGCAcHBwcIDAkJCQkJDBMMDgwMDgwTERQQDxAUER4XFRUXHiIdGx0iKiUlKjQyNEREXP/CABEIADcANwMBIgACEQEDEQH/xAAZAAACAwEAAAAAAAAAAAAAAAAEBwMFCAb/2gAIAQEAAAAA39UUCnct2dVSZMV11tS5G5fmOGS73fU8SeVXNvlpWZ6WVEOtoiTVwgBtW2poSoCztszrv//EABoBAAICAwAAAAAAAAAAAAAAAAUGAAMBAgT/2gAIAQIQAAAA1WTBChM72vCcdKyi+f/EABkBAAIDAQAAAAAAAAAAAAAAAAAGAQMFBP/aAAgBAxAAAACWjF4L3/LTR/WMcvoP/8QAHhAAAgMBAQEBAQEAAAAAAAAABAUCAwYBAAcIFBP/2gAIAQEAAQgA9NkSZZMdLpDUWdEkXoQvreHKL6PcoksbBcYZYVpdSRWvb+YTsYlVpBnDIPOJCzOPgtNuibSb2HzhkuvnfDL6jW4QvhA+cdL9xmRy7k5N8ZkKTUnOWDkMPfTuXV5uu6Fd4ku1i8006qreD+1lkIrbb/fmd1ezzr//AFe2xWkrnPs5OPEKrz2iN6oyEy0QFzWhh0hfI921rv0iT+1UQtt/Pau5PlTed28O8zpEeIu/z9PUyvqjdTbXNgvOGvt7WSFfW9p7SKtt1BxagJEsilSKE0GVMGDEBT1qKRVfQ4XhmDnj1lC6r+jhxXQ24moaF3DA06BJ8S7RodKp2KBzn12lTLA7hoXFG+KTy5fM5V1NolT3QMdC4eQHVkQQL/zZu/oDm3S7/B/OM189WUrkfv/EADMQAAIBAwIDBQYFBQAAAAAAAAECAwAEERIhMUGBBRMyUWEQFCIzYpEGI0JxsVNjc4Kh/9oACAEBAAk/AKRCqMVkvZQTEpHERgeMj7Ve3faM5BKQazlz9EaFVA9TX4TW2USmLL41huWQBsTywa7ZmhXO8eszRBseFo5OHSoFguH2ilQkwTnyUng30n2OyIU728kU4KxE4EYPJn/ioglrZwEhEHEjZUGPM0Gjjc7SsShC8lQKQQBXasrsMACUZ8DBl3HkRV+hhfR30Zj1LIEGNxVqUWZcSR53SRean/qmm1Xdrj8z+rC3gk/fka8V7cSS+vdqdEa9AKUlE7RsTOv9ppgtSvFK65QGJwrfsxGKkd5TvoSJ3PXSDispokXDEEFaZ3WC7iVC3m0e9cIy9vNji0cilh9mUVxFsgPSlJQgA+u+aiBvLfLKwkYthv44UzM07ZUM5DLobPwHl64qUhQqgM7FiApzueJxVsYYJLoiJTzKKFZq3YyxdTqrZrS4coDzhmOtD0yRXBlKnrUg7j4xOipmbXsAyljjAHLFMY7cOXuJp4wjkAfoCnz5mptFxeq0MMh/Qxyxb/UCpmlWys4Ldpn8UpiQKXb1bGay0aK91c45KAUQdSc9KjL3MClJYhxngJyVH1DitSao26EEcQRyIqFJm0g6C2nlyNWJUt4zqyqg+bVete9qTZSGxtyNbIxw2nP3LGrxb22vlU2yQ7yO7D5Wnk44MDwohr+6YST44LgYWMfSg9lx7rdv8zI1Qzf5E8/Ub1Ms3Z1/cLPbe7sCYSI1jMY1EHTtkVaLNd6CIIflqXI21M3rxNdvQRRzPulq+sqnKNCfBVoBoyTK27Fm4nfmfZ//xAAjEQACAQQBAwUAAAAAAAAAAAABAgMABBESEAUiURMjMWKR/9oACAECAQE/AGZUVnY4UDJNTdbLSN6b6R5wO3Oasr+O6ULkb44uRtbzD6GpY4cIjKdfIrouqzKoBz3fnBAIIPwauk0Y2scezByB5rpVmbWD3FxIeY7eGJ3dEGzEknn/xAAjEQACAgEEAQUBAAAAAAAAAAABAgMEEQAFEBIiITFRYnGx/9oACAEDAQE/AFUsyqoySQANQbATEC695CMkdsY1eoS03IYeGeKx62IT911VE3m6MpPwdb/E5rvMWUAdR+kngHBBGqFvNYSysFygJPtrebot2AInzEv95kszSqiO56qAAB6Dn//Z',
},
{
TaskID: 4,
TaskName: 'Prepare product sketch and notes',
StartDate: new Date('04/02/2019'),
Duration: 2,
Predecessor: '2',
Progress: 30,
resources: [4],
EmailId: 'FullerKing@gmail.com',
resourcesImage:
'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',
},
],
},
{
TaskID: 5,
TaskName: 'Concept approval',
StartDate: new Date('04/02/2019'),
Duration: 0,
Predecessor: '3,4',
resources: [5],
EmailId: 'Davoliofuller@gmail.com',
resourcesImage:
'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',
},
{
TaskID: 6,
TaskName: 'Market research',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
EmailId: 'Vanjack@gmail.com',
subtasks: [
{
TaskID: 7,
TaskName: 'Demand analysis',
StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'),
EmailId: 'RoseFuller@gmail.com',
subtasks: [
{
TaskID: 8,
TaskName: 'Customer strength',
StartDate: new Date('04/04/2019'),
Duration: 4,
Predecessor: '5',
Progress: 30,
resources: [7],
EmailId: 'Fullerbuchanan@gmail.com',
resourcesImage:
'/9j/4AAQSkZJRgABAQAAAQABAAD//gAfQ29tcHJlc3NlZCBieSBqcGVnLXJlY29tcHJlc3P/2wCEAAQEBAQEBAQEBAQGBgUGBggHBwcHCAwJCQkJCQwTDA4MDA4MExEUEA8QFBEeFxUVFx4iHRsdIiolJSo0MjRERFwBBAQEBAQEBAQEBAYGBQYGCAcHBwcIDAkJCQkJDBMMDgwMDgwTERQQDxAUER4XFRUXHiIdGx0iKiUlKjQyNEREXP/CABEIADcANwMBIgACEQEDEQH/xAAdAAACAgIDAQAAAAAAAAAAAAAEBwUIAwYAAQkC/9oACAEBAAAAAL/RKXSL6ch0UrvNI3nqPuPwl9aaldWm688LUdtYd922TOpawDHviJKrZ2W4J00JAp+yjGkf/8QAGgEAAgMBAQAAAAAAAAAAAAAAAAMBBAUCBv/aAAgBAhAAAAAR2yPO2tkxrV8S+P/EABkBAAIDAQAAAAAAAAAAAAAAAAAFAQQGA//aAAgBAxAAAACb9ev01i5AbFIpGC8//8QANBAAAgIBAgMFBgUEAwAAAAAAAQIDBAUABgcREhMhIjFBFDJRYnKBCBAVQqFTYXGRI3Ox/9oACAEBAAE/ANHIW70skGFRCqErJdlHOFCPMRj95/jXEHi/w32HA4zmbl3BmA5Q42pYDujjz60jISID5tVvxT7auTOIOFkIh9Ge6Fcj7Ra4ecUtmb96Ku28xaw+Y6S36bccOj/QGJDj6DqrlJobEePy8CwWH7opUJME5+Ck+TfKfyyDyZG1HhKzsiFO1uSKeRWInkIwfRn/APNceN0vsvhhlxiXNa1cVMZS7LwlDP3Mw/uqAnUXC3dt5Ip6dSSwHTqPQpY6j2LuvFiT23b2TLwqSI46jv8AfuGrWA3ttaLG7nt46xTAkVon6ws0bDxo3h5sp/zrhruJeJfDbb2dycQ7W5Ay2QP68DmIuvwJK8xrD2Z1exibrdVury/5P6sLe5J/n0OsB0tWs5Jh47tmSQep7NT0IPsBr8RWIN/bG1JSoMdbdGMef/rdyh1w8kQ0olji7h5nUzyPA6dIOuL2MsWtp5/2eEuUgEpUeYER6iRr8LmThv8ACbFQiXvp2bUJT4EuX1nZVxtnHZn0jL15uXm0cilh/plGtuOowOK+IrIDrfmHOc2jk6ar41aGwn1VpVmH8rrAVt9YaGfLpmIVhWszmvKhkhceagEKvTrN4e/uGtUavlLtVexR2SvMU5u68+Z5FQwHwOptvLj6EyT2J7HbR9EomIIAI5eQ7tcFtvRbY2ZQxUUaDs1DSunk8rgF21vdCNu2FHexli+56tYI+zm/iW7mqWHKA+sMx60P8kamj7WGaMnkHUr/ALGs5kbuJ2xkaMkDA17TVJH8kVonAKuf2gj11j8hkMpiqlubHSU4Y4lQ8uouXA5c1Ze4aFu1Yov7eJEkUMCsg6SeXkdbf6IsFiliUL1VYj3D4oNZKFMhkaGJPNo0V7Vnl6KAUQfcnWVq2Ip4Mxj4y9mBSksQ854CeZUfMPNdVrte/VSzVk643+xBHmCPQjXGixgsPuPEVhN2VjORTpbjA8DCLpEc31gnlra/tQq169mSvJFCp7Hkh6vCeRKk+Q1JZTK5T9KpsJrTP1OqnmEjT1b4AE6xOQgweMhx83azyIAkCjxPMxPPpX7n7DWMpzVkmtXSGv2mEk5HkvosY+VB+VvDv28l7FWjUuP7/hDRS/Wnx/uNcSeHlzcYpWc7EDLUNns545AwmE/SSPRkKlfDqngt/i3Xw0WYWtiWcq11wkk0UfyovIsx1szaX6NjWqYHHgCWTnNkrsoeawR++QLzJPwXuUaxuGgx7e1TObF4ry7Vx7oPogHuj8v/xAAjEQACAgEDAwUAAAAAAAAAAAABAwIRABAhMQQFYRIyQVFi/9oACAECAQE/AOMHUpn7WA4tsWi4SBHjQ7g4ulxkv1A2Tx5zthK5MT+r1mmKmygRyLGdCqQLZgGtt9Wwi1sJz5oDL+BsPoaf/8QAIhEAAgEDAwUBAAAAAAAAAAAAAQMCAAQREBIhBRMiMWFi/9oACAEDAQE/AIgyIiPZo2D1kdxUqeiSCBIEfDok7WrP6FXEJMYGY2j7XVYhioOzyAI6puZXNpBwwDE811RsT2oGXkSTt+a2l25FuxK8beSMjkZo5lIzkSZH2T70/9k=',
},
],
},
],
},
];
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
resourceInfo: 'resources',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks',
};
this.toolbar = ['PdfExport'];
this.splitterSettings = {
columnIndex: 4,
};
this.resourceFields = {
id: 'resourceId',
name: 'resourceName',
};
this.resources = editingResources;
}
public toolbarClick(args: ClickEventArgs): void {
if (args.item.id === 'ganttDefault_pdfexport') {
let exportProperties: PdfExportProperties = {
fileName: 'new.pdf',
};
this.ganttChart!.pdfExport(exportProperties);
}
}
public pdfQueryCellInfo(args: any): void {
if (args.column.headerText === 'Resources') {
{
args.image = {
height: 40,
width: 40,
base64: (args as any).data.taskData.resourcesImage,
};
}
}
if (args.column.headerText === 'Email ID') {
args.hyperLink = {
target: 'mailto:' + (args as any).data.taskData.EmailId,
displayText: (args as any).data.taskData.EmailId,
};
}
}
}
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 with taskbar template
The PDF export functionality allows to export taskbar templates that include images
and text
to an PDF document using pdfQueryTaskbarInfo event. Taskbars in the exported PDF document can be customized or formatted using the pdfQueryTaskbarInfo
event for parent taskbar templates, taskbar templates and milestone templates.
In the following sample, taskbar templates with images and text are exported to PDF using taskbarTemplate properties in the pdfQueryTaskbarInfo event.
Note: PDF Export supports base64 string to export the images.
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import {
GanttComponent,
ToolbarItem,
PdfExportProperties
} from '@syncfusion/ej2-angular-gantt';
import { editingResources, base64Data } from './data';
import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
@Component({
selector: 'app-root',
template: `<ejs-gantt #ganttDefault id="ganttDefault" height="430px" [dataSource]="data" [taskFields]="taskSettings" [columns]="columns" [toolbar]="toolbar" [rowHeight]="45" [taskbarHeight]="35" (pdfQueryTaskbarInfo)="pdfQueryTaskbarInfo($event)"
(toolbarClick)="toolbarClick($event)" allowPdfExport='true' [allowResizing] = 'true' [splitterSettings]="splitterSettings" [resourceFields]="resourceFields" [resources]="resources"
>
<ng-template #taskbarTemplate let-data>
<div class="e-gantt-child-taskbar-inner-div e-gantt-child-taskbar" style="position:absolute; height: 100%">
<img [src]="'./' + data.ganttProperties.resourceInfo[0].resourceId + '.png'" style="height: 40px; width: 40px;">
<span class="e-span"></span>
</div>
</ng-template>
<ng-template #parentTemplate let-data>
<div class="e-gantt-parent-taskbar-inner-div e-gantt-parent-taskbar" style="position:absolute; height: 100%">
<span class="e-span"></span>
</div>
</ng-template>
<ng-template #milestoneTemplate let-data>
<div>
<div class="e-gantt-milestone" style="position:absolute;">
<div class="image" style="position:absolute; left: 8px ; top: 4px">
<img class="moments" src=.png height="30px" width="30px" />
</div>
<div
class="e-milestone-top"
style="border-right-width:26px; margin-top: -4px;border-left-width:26px;border-bottom-width:26px;"
></div>
<div
class="e-milestone-bottom"
style="top:16px;border-right-width:26px; border-left-width:26px; border-top-width:26px;"
></div>
</div>
</div>
</ng-template>
</ejs-gantt>`,
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
public data?: object[];
public taskSettings?: object;
public splitterSettings?: object;
public resources?: object[];
public rowHeight?: number;
public toolbar?: ToolbarItem[];
@ViewChild('ganttDefault', { static: true })
public ganttChart?: GanttComponent;
columns: ({ field: string; headerText: string; textAlign: string; width: string; visible?: undefined; } | { field: string; headerText: string; width: string; visible: boolean; textAlign?: undefined; } | { field: string; headerText: string; width: string; textAlign?: undefined; visible?: undefined; })[] | undefined;
public resourceFields?: object;
public ngOnInit(): void {
this.data = base64Data,
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
resourceInfo: 'resources',
startDate: 'StartDate',
duration: 'Duration',
child: 'subtasks',
};
this.toolbar = ['PdfExport'];
this.columns = [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
{ field: 'TaskName', headerText: 'Task Name', width: '150'},
];
this.splitterSettings = {
columnIndex: 1,
};
this.resourceFields = {
id: 'resourceId',
name: 'resourceName',
};
this.resources = editingResources;
}
public toolbarClick(args: ClickEventArgs): void {
if (args.item.id === 'ganttDefault_pdfexport') {
let exportProperties: PdfExportProperties = {
fileName: 'new.pdf',
};
this.ganttChart!.pdfExport(exportProperties);
}
}
public pdfQueryTaskbarInfo(args: any): void {
if (!args.data.hasChildRecords) {
if (args.data.ganttProperties.resourceNames) {
args.taskbarTemplate.image = [{
width: 20, base64: (args as any).data.taskData.resourcesImage, height: 20
}]
}
args.taskbarTemplate.value = args.data.TaskName;
}
if (args.data.hasChildRecords) {
if (args.data.ganttProperties.resourceNames) {
args.taskbarTemplate.image = [{
width: 20, base64: (args as any).data.taskData.resourcesImage, height: 20
}]
}
args.taskbarTemplate.value = args.data.TaskName;
}
if (args.data.ganttProperties.duration === 0) {
if (args.data.ganttProperties.resourceNames) {
args.taskbarTemplate.image = [{
width: 20, base64: (args as any).data.taskData.resourcesImage, height: 20,
}]
}
args.taskbarTemplate.value = args.data.TaskName
}
}
}
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 with task label template
The PDF export functionality allows to export task label template that include images
and text
to an PDF document using pdfQueryTaskbarInfo event.
In the following sample, task label template with images and text are exported to PDF using labelSettings properties in the pdfQueryTaskbarInfo event.
Note: PDF Export supports base64 string to export the images.
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import {
GanttComponent,
ToolbarItem,
PdfExportProperties,
} from '@syncfusion/ej2-angular-gantt';
import { base64Data, editingResources } from './data';
import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
@Component({
selector: 'app-root',
template: `<ejs-gantt #ganttDefault id="ganttDefault" height="430px" [dataSource]="data" [taskFields]="taskSettings" [toolbar]="toolbar" [labelSettings]="labelSettings" (pdfQueryTaskbarInfo)="pdfQueryTaskbarInfo($event)"
(toolbarClick)="toolbarClick($event)" allowPdfExport='true' [allowResizing] = 'true' [projectStartDate]="projectStartDate" [projectEndDate]="projectEndDate" [splitterSettings]="splitterSettings" [resourceFields]="resourceFields" [resources]="resources">
<e-columns>
<e-column field='TaskID' headerText='Task ID' textAlign='Left'></e-column>
<e-column field='TaskName' headerText='Task Name' width='250'></e-column>
</e-columns>
<ng-template #labelSettingsLeftLabel let-data>
<span> [ % ]</span>
</ng-template>
<ng-template #labelSettingsRightLabel let-data>
<div
style="display:inline-flex"
innerHtml=""></div>
</ng-template>
</ejs-gantt>`,
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
public data?: object[];
public taskSettings?: object;
public splitterSettings?: object;
public labelSettings?: object;
public resources?: object[];
public projectStartDate?: Date;
public projectEndDate?: Date;
public toolbar?: ToolbarItem[];
public customFunction(data: any): string {
var container = document.createElement('div');
if (data.ganttProperties.resourceNames) {
var resources = data.resources.split(',');
for (var i = 0; i < resources.length; i++) {
var subContainer = document.createElement('div');
var img = document.createElement('img');
var span = document.createElement('span');
span.className = 'labelClass';
span.innerHTML = resources[i];
img.src = 'https://ej2.syncfusion.com/angular/demos/assets/gantt/images/' +
resources[i] +'.png';
img.height = 30;
img.width = 30;
subContainer.append(img);
subContainer.append(span);
container.append(subContainer);
}
}
return container.innerHTML;
}
@ViewChild('ganttDefault', { static: true })
public ganttChart?: GanttComponent;
public resourceFields?: object;
public ngOnInit(): void {
this.data = base64Data;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
resourceInfo: 'resources',
progress : 'Progress',
startDate: 'StartDate',
duration: 'Duration',
child: 'subtasks',
};
this.toolbar = ['PdfExport'];
this.splitterSettings = {
columnIndex: 1,
};
this.resourceFields = {
id: 'resourceId',
name: 'resourceName',
};
this.labelSettings = {
taskLabel: '${Progress}%',
};
this.resources = editingResources;
this.projectStartDate= new Date('03/24/2019');
this.projectEndDate= new Date('04/30/2019');
}
public toolbarClick(args: ClickEventArgs): void {
if (args.item.id === 'ganttDefault_pdfexport') {
let exportProperties: PdfExportProperties = {
fileName: 'new.pdf',
};
this.ganttChart!.pdfExport(exportProperties);
}
}
public pdfQueryTaskbarInfo(args: any): void {
args.labelSettings.leftLabel.value = args.data.ganttProperties.taskName + '[' + args.data.ganttProperties.progress + ']';
if (args.data.ganttProperties.resourceNames) {
args.labelSettings.rightLabel.value = args.data.ganttProperties.resourceNames;
args.labelSettings.rightLabel.image = [{
base64: (args as any).data.taskData.resourcesImage, width: 20, height: 20
}]
}
}
}
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 with header template
The PDF export functionality allows to export header template that include images
and text
to an PDF document using pdfColumnHeaderQueryCellInfo event.
In the following sample, header template with images and text are exported to PDF using headerTemplate properties in the pdfColumnHeaderQueryCellInfo event.
Note: PDF Export supports base64 string to export the images.
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import {
GanttComponent,
ToolbarItem,
PdfExportProperties
} from '@syncfusion/ej2-angular-gantt';
import { editingResources,base64Data } from './data';
import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
@Component({
selector: 'app-root',
template: `<ejs-gantt #ganttDefault id="ganttDefault" height="430px" [dataSource]="data" [taskFields]="taskSettings" [toolbar]="toolbar" [labelSettings]="labelSettings" (pdfColumnHeaderQueryCellInfo)="pdfColumnHeaderQueryCellInfo($event)"
(toolbarClick)="toolbarClick($event)" allowPdfExport='true' [allowResizing] = 'true' [projectStartDate]="projectStartDate" [projectEndDate]="projectEndDate" [splitterSettings]="splitterSettings" [resourceFields]="resourceFields" [resources]="resources">
<e-columns>
<e-column field='TaskName' width='250'>
<ng-template #headerTemplate>
<img
src="https://ej2.syncfusion.com/angular/demos/assets/gantt/images/Task name.png"
width="20"
height="20"
/> Task Name
</ng-template>
</e-column>
<e-column field='StartDate'>
<ng-template #headerTemplate>
< <img src="https://ej2.syncfusion.com/angular/demos/assets/gantt/images/Start date.png" width="20" height="20" /> Start Date
</ng-template>
</e-column>
</e-columns>
</ejs-gantt>`,
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
public data?: object[];
public taskSettings?: object;
public splitterSettings?: object;
public labelSettings?: object;
public resources?: object[];
public i: number = 0;
public projectStartDate?: Date;
public projectEndDate?: Date;
public toolbar?: ToolbarItem[];
@ViewChild('ganttDefault', { static: true })
public ganttChart?: GanttComponent;
public resourceFields?: object;
public ngOnInit(): void {
this.data = base64Data;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
resourceInfo: 'resources',
progress : 'Progress',
startDate: 'StartDate',
duration: 'Duration',
child: 'subtasks',
};
this.toolbar = ['PdfExport'];
this.splitterSettings = {
columnIndex: 1,
};
this.resourceFields = {
id: 'resourceId',
name: 'resourceName',
};
this.labelSettings = {
taskLabel: '${Progress}%',
};
this.resources = editingResources;
this.projectStartDate= new Date('03/24/2019');
this.projectEndDate= new Date('04/30/2019');
}
public toolbarClick(args: ClickEventArgs): void {
if (args.item.id === 'ganttDefault_pdfexport') {
let exportProperties: PdfExportProperties = {
fileName: 'new.pdf',
};
this.ganttChart!.pdfExport(exportProperties);
}
}
public pdfColumnHeaderQueryCellInfo(args: any): void {
let base64Array: Object[] = [
{ 'TaskName': '/9j/4AAQSkZJRgABAQIAHAAcAAD/4QBiRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAMAAAITAAMAAAABAAEAAAAAAAAAAAAcAAAAAQAAABwAAAAB/9sAQwADAgICAgIDAgICAwMDAwQGBAQEBAQIBgYFBgkICgoJCAkJCgwPDAoLDgsJCQ0RDQ4PEBAREAoMEhMSEBMPEBAQ/9sAQwEDAwMEAwQIBAQIEAsJCxAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQ/8AAEQgAIAAgAwERAAIRAQMRAf/EABgAAQEBAQEAAAAAAAAAAAAAAAYIAAcF/8QALBAAAQQCAgEDAwIHAAAAAAAAAQIDBAUGBxESAAgTIRQVQRYxFzhXdpa01f/EABQBAQAAAAAAAAAAAAAAAAAAAAD/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwB7gessOlaiw2zpdS4Ld2cqngOyl2rLbHcqjpLiy6IzylL7/gp/J+RxwQQt68w6mewu7XrfEKC+azXGuiqiO2r2ybqKnhD3stLVy2TyOg/cj5A5IXr4G8Cf9+aD0XT6K2Nb1GlsEgz4OJW8mLKjY5DaeYdRDdUhxC0thSVJUAQoEEEAjwNW2XoFprGLb1E/QEGdBeRJiyoztK08w6hQUhxC0kFKkqAIUCCCAR4CDD9sbV2RWSso19r3BrDGza2NfWWEnOH21T2Yst2MJKUs1ryAhwslSeHFfBHyRwSHnW26tv12qpO5Ier8GtMdYoVZI2qJm01L0iCGPfC0IeqEcKLfyErKT+DwfjwFvqO/l62h/Zl3/oveB0TwJTe2FRYxX5RqrLrj065HUuZRdzXIOQ7GRHc6yLV+YlmVDcgPJS6044AQVHhTY/I58Ao3lmJUeibfRWBZH6bKCFbUL1K7PTtRpTrzjsQRlzJCWqxoPyFISkqWepUQOfj48Ctdj4j/ABA15lGB/cPoP1JSzaj6v2vd+n+oYW17nTsnv1789ew5445H7+Ad+x+oX+qGu/8AA53/AGPA5drHb+D4rru/xSy3nrPG86i5hkwnOXDjbTIkG9lrU4qCqY271W0R0BfJSFI5UvqQQKWW5cOT6NMhxTZO+9d5Fl72ByIYjQrmM9LMo1oQll0iXIMuSH+3Z9BSlaiFBCeOSH//2Q==' },
{ 'StartDate': '/9j/4AAQSkZJRgABAQIAHAAcAAD/4QBiRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAMAAAITAAMAAAABAAEAAAAAAAAAAAAcAAAAAQAAABwAAAAB/9sAQwADAgICAgIDAgICAwMDAwQGBAQEBAQIBgYFBgkICgoJCAkJCgwPDAoLDgsJCQ0RDQ4PEBAREAoMEhMSEBMPEBAQ/9sAQwEDAwMEAwQIBAQIEAsJCxAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQ/8AAEQgAIAAgAwERAAIRAQMRAf/EABcAAQEBAQAAAAAAAAAAAAAAAAcABgX/xAAzEAAABAQDBwEGBwAAAAAAAAABAgMEBQYHEQgSEwAUFRYYITI0IiQxMzVCN0NRVWaCg//EABUBAQEAAAAAAAAAAAAAAAAAAAAB/8QAGBEBAQEBAQAAAAAAAAAAAAAAABEBIUH/2gAMAwEAAhEDEQA/AG2t2PafKP4qHFI3sLlRGR4bE4QlEIi4Yu1XqLJdBsq5UAU1spjEKqoJQBIfEoZTD8QCJcxxTdhwp3JlI6RxCQ5yYQmGOVYjEVYbE8oPVoi8VFNMVRanEoInbjcUvIxwAw27BTHjim7EfTuc6R1ciEhyawi0MbKw6IpQ2J5ReoxFmqCagpC6OBRRI4G4JeRSAJgv3B3ojj2nysGKhvSNlC5UWkeJROLpQ+It2LtJ6syQQcqtlBFRbKUxypJiYBSDyMGUo/AOtP7GoFVcRtTZRkWjGHiLcm8F3qKTvLi68Qd72wIoTMslm1MmmcgXAtigmAXsO1lSwYwJKqEwV0mLD8yw54TiTFLMNJFXblWUHAMjpHK2MAJnC5xNZ2n2EgB2N37BdCqOpVQl+uku4fnuHPCceYpmhp4q0cpSg4FkRIhXJhBQ42OBrNFOwEEO5e/cbIUnSAxqBSrEbTKUZ6oxh4hPOXGt1ikkS4uhEGm6MDqHyrK5dPPqEINgNcoqANrhskLWameB0/jWL2uPPWIuYaV6PLO68Jm5CB8SvCy58+qA62nYlreOqN/INmGiCT5cpetjBnmEvcV00w2XUIAio0ndKem6L2Jq5GN2ykQEMixQEygaYBcN3KH5Y7PTxThLlL0cYMjQlliummJS6vAFlHc7qz03WewxXI+s2TiABkRKIlTDTELjvBg/MDZ6eF+WIHT+C4vaHci4i5hqprczb1xabkI5w20LNkyaQBo6lz3v5aQW8R2aYz1VOkrq9rP1Sfx3gX1P9rJvPof8PP8Ar92zDQxLHQ71NzbzJ+EHBkuAfV/X5Gefw968t8+Z7P6fZs4dUz9DvU3KXLf4QcGV4/8AV/X5HmTz968tz+X7P6/fs4dM9K+krq9ox0t/yLjv1P8Aaz7t67/fw/t9uzTH/9k=' },
]
while (this.i < base64Array.length) {
const key = Object.keys(base64Array[this.i])[0];
const value = (base64Array[this.i] as any)[key];;
if (key === args.column.field) {
args.headerTemplate.image = [{
base64: value, width: 20, height: 20
}];
args.headerTemplate.value = args.column.field;
break;
}
this.i++;
}
}
}
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);