Syncfusion AI Assistant

How can I help you?

To customize PDF export

16 Apr 202624 minutes to read

Customizing PDF export in the EJ2 TypeScript Gantt Chart control allows tailoring exported documents for specific needs, using PdfExportProperties to adjust file names, page orientation, size, columns, headers, footers, timelines, and templates. Ensuring focused content like selected rows or styled taskbars, with the PdfExport module injected and allowPdfExport enabled. Use beforePdfExport and pdfExportComplete events for pre-export and post-export modifications, and pdfQueryTaskbarInfo for taskbar styling, supporting RTL layouts via enableRtl.

Customize file name

Set the exported PDF file name using the fileName property in PdfExportProperties, such as ProjectPlan.pdf, for personalized document naming.

import { Gantt, Toolbar, PdfExport, Selection, PdfExportProperties } from '@syncfusion/ej2-gantt';
import { GanttData } from './datasource.ts';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';

Gantt.Inject(Toolbar, PdfExport, Selection);

let clickHandler: EmitType<ClickEventArgs> = (args: ClickEventArgs) => {
    if (args.item.id === 'GanttExport_pdfexport') {
        let exportProperties: PdfExportProperties = {
            fileName: "new.pdf"
        };
        gantt.pdfExport(exportProperties);
    }
};

let gantt: Gantt = new Gantt({
    dataSource: GanttData,
    height: '450px',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    allowPdfExport: true,
    toolbar: ['PdfExport'],
    toolbarClick: clickHandler
});
gantt.appendTo('#GanttExport');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Gantt Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/tailwind3.css" rel="stylesheet" type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='GanttExport'></div>
    </div>
    </script>
</body>

</html>

How to change page orientation

Adjust page orientation to Portrait or Landscape using the pageOrientation property in PdfExportProperties. By default, the exported PDF document is in Landscape orientation.

import { Gantt, Toolbar, PdfExport, Selection, PdfExportProperties } from '@syncfusion/ej2-gantt';
import { GanttData } from './datasource.ts';
import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';

Gantt.Inject(Toolbar, PdfExport, Selection);

let clickHandler: EmitType<ClickEventArgs> = (args: ClickEventArgs) => {
    if (args.item.id === 'GanttExport_pdfexport') {
        let exportProperties: PdfExportProperties = {
           pageOrientation: 'Portrait'
        };
        gantt.pdfExport(exportProperties);
    }
};

let gantt: Gantt = new Gantt({
    dataSource: GanttData,
    height: '450px',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    allowPdfExport: true,
    toolbar: ['PdfExport'],
    toolbarClick: clickHandler
});
gantt.appendTo('#GanttExport');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Gantt Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/tailwind3.css" rel="stylesheet" type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='GanttExport'></div>
    </div>
    </script>
</body>

</html>

Customize page size

Page size can be customized for the exported document using the pageSize property in pdfExportProperties.
The supported page sizes are:

  • Letter
  • Note
  • Legal
  • A0 to A9
  • B0 to B5
  • Archa
  • Archb
  • Archc
  • Archd
  • Arche
  • Flsa
  • HalfLetter
  • Letter11x17
  • Ledger
import { Gantt, Toolbar, PdfExport, Selection, PdfExportProperties } from '@syncfusion/ej2-gantt';
import { GanttData } from './datasource.ts';
import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';

Gantt.Inject(Toolbar, PdfExport, Selection);

let clickHandler: EmitType<ClickEventArgs> = (args: ClickEventArgs) => {
    if (args.item.id === 'GanttExport_pdfexport') {
        let exportProperties: PdfExportProperties = {
            pageSize: 'A0'
        };
        gantt.pdfExport(exportProperties);
    }
};

let gantt: Gantt = new Gantt({
    dataSource: GanttData,
    height: '450px',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    allowPdfExport: true,
    toolbar: ['PdfExport'],
    toolbarClick: clickHandler
});
gantt.appendTo('#GanttExport');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Gantt Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
	<link href="https://cdn.syncfusion.com/ej2/33.2.3/tailwind3.css" rel="stylesheet" type="text/css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
        <div id='loader'>Loading....</div>
        <div id='container'>
            <div id='GanttExport'></div>        
        </div>   
 </script>
</body>

</html>

Export current view data

PDF export provides an option to export the current view data into PDF. To export current view data alone, define the exportType to CurrentViewData.

import { Gantt, Toolbar, PdfExport, Selection, Filter, PdfExportProperties } from '@syncfusion/ej2-gantt';
import { GanttData } from './datasource.ts';
import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';

Gantt.Inject(Toolbar, PdfExport, Selection, Filter);

let clickHandler: EmitType<ClickEventArgs> = (args: ClickEventArgs) => {
    if (args.item.id === 'GanttExport_pdfexport') {
        let exportProperties: PdfExportProperties = {
            exportType: 'CurrentViewData'
        };
        gantt.pdfExport(exportProperties);
    }
};

let gantt: Gantt = new Gantt({
    dataSource: GanttData,
    height: '450px',
    allowFiltering: true,
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'parentID',
    },
    allowPdfExport: true,
    toolbar: ['PdfExport'],
    toolbarClick: clickHandler
});
gantt.appendTo('#GanttExport');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Gantt Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
	<link href="https://cdn.syncfusion.com/ej2/33.2.3/tailwind3.css" rel="stylesheet" type="text/css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
        <div id='loader'>Loading....</div>
        <div id='container'>
            <div id='GanttExport'></div>        
        </div>   
 </script>
</body>

</html>

By default, we render the default footer for a PDF file, this can be enabled or disabled by using the enableFooter property.

import { Gantt, Toolbar, PdfExport, Selection, PdfExportProperties } from '@syncfusion/ej2-gantt';
import { GanttData } from './datasource.ts';
import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';

Gantt.Inject(Toolbar, PdfExport, Selection);

let clickHandler: EmitType<ClickEventArgs> = (args: ClickEventArgs) => {
    if (args.item.id === 'GanttExport_pdfexport') {
        let exportProperties: PdfExportProperties = {
            enableFooter: false
        };
        gantt.pdfExport(exportProperties);
    }
};

let gantt: Gantt = new Gantt({
    dataSource: GanttData,
    height: '450px',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    allowPdfExport: true,
    toolbar: ['PdfExport'],
    toolbarClick: clickHandler
});
gantt.appendTo('#GanttExport');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Gantt Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/tailwind3.css" rel="stylesheet" type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='GanttExport'></div>
    </div>
    </script>
</body>

</html>

Export hidden columns

PDF export provides an option to export hidden columns of Gantt by defining the includeHiddenColumn to true.

import { Gantt, Toolbar, PdfExport, Selection, PdfExportProperties, ClickEventArgs } from '@syncfusion/ej2-gantt';
import { GanttData } from './datasource.ts';

Gantt.Inject(Toolbar, PdfExport, Selection);

let gantt: Gantt = new Gantt({
    dataSource: GanttData,
    height: '430px',
    treeColumnIndex: 1,
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    columns: [
        { field: 'TaskID', headerText: 'Task ID', width: 100 },
        { field: 'TaskName', headerText: 'Task Name', width: 150, visible: false },
        { field: 'StartDate', headerText: 'Start Date', width: 150 },
        { field: 'Duration', headerText: 'Duration', width: 150 },
        { field: 'Progress', headerText: 'Progress', width: 150 }
    ],
    toolbar: ['PdfExport'],
    allowPdfExport: true,
    toolbarClick: (args: ClickEventArgs): void => {
        if (args.item.id === 'Gantt_pdfexport') {
            let exportProps: PdfExportProperties = {
                includeHiddenColumn: true
            };
            gantt.pdfExport(exportProps);
        }
    }
});

gantt.appendTo('#Gantt');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Gantt Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
	<link href="https://cdn.syncfusion.com/ej2/33.2.3/tailwind3.css" rel="stylesheet" type="text/css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
        <div id='loader'>Loading....</div>
        <div id='container'>
            <div id='Gantt'></div>        
        </div>   
 </script>
</body>

</html>

Export predecessor lines

The visibility of predecessor lines in the exported PDF document can be controlled using the showPredecessorLines property.

import { Gantt, Toolbar, PdfExport, Selection, PdfExportProperties } from '@syncfusion/ej2-gantt';
import { GanttData } from './datasource.ts';
import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';

Gantt.Inject(Toolbar, PdfExport, Selection);

let clickHandler: EmitType<ClickEventArgs> = (args: ClickEventArgs) => {
    if (args.item.id === 'GanttExport_pdfexport') {
        let exportProperties: PdfExportProperties = {
            showPredecessorLines: true
        };
        gantt.pdfExport();
    }
};

let gantt: Gantt = new Gantt({
    dataSource: GanttData,
    height: '450px',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        dependency: 'Predecessor',
        parentID: 'ParentID'
    },
    allowPdfExport: true,
    toolbar: ['PdfExport'],
    toolbarClick: clickHandler
});
gantt.appendTo('#GanttExport');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Gantt Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
	<link href="https://cdn.syncfusion.com/ej2/33.2.3/tailwind3.css" rel="stylesheet" type="text/css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
        <div id='loader'>Loading....</div>
        <div id='container'>
            <div id='GanttExport'></div>        
        </div>   
 </script>
</body>

</html>

Export specific columns

A hidden column can be shown, or a visible column can be hidden while exporting the Gantt chart by using the toolbarClick and beforePdfExport events.

Columns can be shown or hidden by setting the column.visible property to true or false, respectively.

In the following example, the Duration column is initially hidden in the Gantt chart. During export, the Duration column is made visible and the StartDate column is hidden.

import { Gantt, Toolbar, PdfExport, Selection } from '@syncfusion/ej2-gantt';
import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
import { GanttData } from './datasource.ts';

Gantt.Inject(Toolbar, PdfExport, Selection);

let clickHandler = (args: ClickEventArgs) => {
    if (args.item.id === 'GanttExport_pdfexport') {
        gantt.pdfExport();
    }
};

let beforePdfExport = (args: Object) => {
    (gantt.treeGrid.columns[2] as any).visible = false;
    (gantt.treeGrid.columns[3] as any).visible = true;
};

let gantt: Gantt = new Gantt({
    dataSource: GanttData,
    height: '450px',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        dependency: 'Predecessor',
        parentID: 'ParentID',
    },
    columns: [
        { field: 'TaskID' },
        { field: 'TaskName' },
        { field: 'StartDate' },
        { field: 'Duration', visible: false },
        { field: 'Progress' }
    ],
    allowPdfExport: true,
    toolbar: ['PdfExport'],
    toolbarClick: clickHandler,
    beforePdfExport: beforePdfExport
});
gantt.appendTo('#GanttExport');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Gantt Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/tailwind3.css" rel="stylesheet" type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='GanttExport'></div>
    </div>
    </script>
</body>

</html>

Conditional cell formatting

TreeGrid cells in the exported PDF can be customized or formatted using the pdfQueryCellInfo event. This event allows formatting TreeGrid cells in the exported PDF document based on the column cell value.

In the following sample, the background color is set for Progress column in the exported document by using the args.style.backgroundColor property.

import { Gantt, Toolbar, PdfExport, Selection } from '@syncfusion/ej2-gantt';
import { GanttData } from './datasource.ts';
import { PdfColor } from '@syncfusion/ej2-pdf-export';
Gantt.Inject(Toolbar, PdfExport, Selection);

var clickHandler = function (args: any) {
    if (args.item.id === 'GanttExport_pdfexport') {
        gantt.pdfExport();
    }
};

var pdfQueryCellInfo = function (args: any) {
    if (args.column.field == 'Progress') {
        if (args.value < 50) {
            args.style.backgroundColor = new PdfColor(240, 128, 128);
        } else {
            args.style.backgroundColor = new PdfColor(165, 105, 189);
        }
    }
};

let gantt: Gantt = new Gantt({
    dataSource: GanttData,
    height: '450px',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    allowPdfExport: true,
    toolbar: ['PdfExport'],
    toolbarClick: clickHandler,
    pdfQueryCellInfo: pdfQueryCellInfo
});
gantt.appendTo('#GanttExport');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Gantt Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
	<link href="https://cdn.syncfusion.com/ej2/33.2.3/tailwind3.css" rel="stylesheet" type="text/css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
        <div id='loader'>Loading....</div>
        <div id='container'>
            <div id='GanttExport'></div>        
        </div>   
 </script>
</body>

</html>

Timeline cell formatting

Timeline cells in the exported PDF document can be customized or formatted using the pdfQueryTimelineCellInfo event.

In the following sample, the header background color is set for timeline cells in the exported document by using the args.timelineCell.backgroundColor property.

import { Gantt, Toolbar, PdfExport, Selection, TaskFieldsModel, ToolbarClickEventArgs, PdfQueryTimelineCellInfoEventArgs } from '@syncfusion/ej2-gantt';
import { PdfColor } from '@syncfusion/ej2-pdf-export';
import { GanttData } from './datasource.ts';

Gantt.Inject(Toolbar, PdfExport, Selection);

let gantt: Gantt = new Gantt({
    id: 'ganttDefault',
    height: '430px',
    dataSource: GanttData,
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    } as TaskFieldsModel,
    treeColumnIndex: 1,
    allowPdfExport: true,
    toolbar: ['PdfExport'],
    toolbarClick: (args: ToolbarClickEventArgs) => {
        if (args.item.id === 'GanttExport_pdfexport') {
            gantt.pdfExport();
        }
    },
    pdfQueryTimelineCellInfo: (args: PdfQueryTimelineCellInfoEventArgs) => {
        args.timelineCell.backgroundColor = new PdfColor(240, 248, 255);
    },
    columns: [
        { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: 100 },
        { field: 'TaskName', headerText: 'Task Name', width: 150, visible: false },
        { field: 'StartDate', headerText: 'StartDate', width: 150 },
        { field: 'Duration', headerText: 'Duration', width: 150 },
        { field: 'Progress', headerText: 'Progress', width: 150 }
    ]
});

gantt.appendTo('#GanttExport');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Gantt Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/tailwind3.css" rel="stylesheet" type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='GanttExport'></div>
    </div>
    </script>
</body>

</html>

Taskbar formatting

Taskbars in the exported PDF document can be customized or formatted using the pdfQueryTaskbarInfo event.

In the following sample, the taskbar background color is customized in the chart side of the exported document by using the args.taskbar property.

import { Gantt, Toolbar, PdfExport, Selection, ToolbarClickEventArgs, PdfQueryTaskbarInfoEventArgs } from '@syncfusion/ej2-gantt';
import { PdfColor } from '@syncfusion/ej2-pdf-export';
import { GanttData } from './datasource.ts';

Gantt.Inject(Toolbar, PdfExport, Selection);

let gantt: Gantt = new Gantt({
    id: 'ganttDefault',
    dataSource: GanttData,
    height: '430px',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    treeColumnIndex: 1,
    allowPdfExport: true,
    toolbar: ['PdfExport'],
    toolbarClick: (args: ToolbarClickEventArgs) => {
        if (args.item.id === 'GanttExport_pdfexport') {
            gantt.pdfExport();
        }
    },
    pdfQueryTaskbarInfo: (args: PdfQueryTaskbarInfoEventArgs) => {
        const d: any = args.data;
        if (d.Progress < 50 && !d.hasChildRecords) {
            const bar = args.taskbar;
            bar.progressColor = new PdfColor(205, 92, 92);
            bar.taskColor = bar.taskBorderColor = new PdfColor(240, 128, 128);
        }
    },
    columns: [
        { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: 100 },
        { field: 'TaskName', headerText: 'Task Name', width: 150, visible: false },
        { field: 'StartDate', headerText: 'StartDate', width: 150 },
        { field: 'Duration', headerText: 'Duration', width: 150 },
        { field: 'Progress', headerText: 'Progress', width: 150 }
    ]
});

gantt.appendTo('#GanttExport');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Gantt Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/tailwind3.css" rel="stylesheet" type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='GanttExport'></div>
    </div>
    </script>
</body>

</html>

Customize Gantt chart appearance in PDF export

PDF export allows to customize the Gantt chart’s appearance in the exported PDF documents. To customize the appearance of Gantt charts in exported PDF documents, define ganttStyle within pdfExportProperties. By using ganttStyle, can customize columnHeader, fontFamily, cell, taskbar, label, timeline, chartGridLineColor, connectorLineColor, criticalConnectorLineColor, footer, font, eventMarker and holiday regardless of the theme.

import {
    Gantt,
    Toolbar,
    PdfExport,
    Selection,
    DayMarkers,
    PdfExportProperties
} from '@syncfusion/ej2-gantt';
import {
    PdfColor,
    PdfDashStyle,
    PdfPaddings,
    PdfBorders,
    PdfFontFamily,
    PdfFontStyle,
    PdfPen,
    PdfStringFormat,
    PdfTextAlignment
} from '@syncfusion/ej2-pdf-export';
import { GanttData } from './datasource.ts';

Gantt.Inject(Toolbar, PdfExport, Selection, DayMarkers);

let gantt: Gantt = new Gantt({
    id: 'ganttDefault',
    dataSource: GanttData,
    height: '430px',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        predecessor: 'Predecessor',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    treeColumnIndex: 1,
    allowPdfExport: true,
    toolbar: ['PdfExport'],
    eventMarkers: [
        { day: '04/10/2019', cssClass: 'e-custom-event-marker', label: 'Project approval and kick-off' }
    ],
    holidays: [
        { from: '04/04/2019', to: '04/04/2019', label: ' Public holidays', cssClass: 'e-custom-holiday' },
        { from: '04/12/2019', to: '04/12/2019', label: ' Public holiday', cssClass: 'e-custom-holiday' }
    ],
    toolbarClick: (args: any) => {
        if (args.item.id === 'GanttExport_pdfexport') {

            const stringFormat = new PdfStringFormat();
            stringFormat.alignment = PdfTextAlignment.Center;

            const vertical = new PdfStringFormat();
            vertical.alignment = PdfTextAlignment.Center;

            const pen = new PdfPen(new PdfColor(105, 105, 105), 1);
            pen.dashStyle = PdfDashStyle.Dash;

            const borderPen = new PdfPen(new PdfColor(192, 192, 192), 1);
            const borders = new PdfBorders();
            borders.all = borderPen;

            const exportProperties: PdfExportProperties = {
                ganttStyle: {
                    connectorLineColor: new PdfColor(128, 0, 0),
                    taskbar: {
                        taskColor: new PdfColor(240, 128, 128),
                        taskBorderColor: new PdfColor(255, 0, 0),
                        progressColor: new PdfColor(205, 92, 92)
                    },
                    columnHeader: {
                        backgroundColor: new PdfColor(179, 219, 255)
                    },
                    timeline: {
                        backgroundColor: new PdfColor(179, 219, 255),
                        padding: new PdfPaddings(5, 2, 0, 0)
                    },
                    footer: {
                        backgroundColor: new PdfColor(205, 92, 92)
                    },
                    label: {
                        fontColor: new PdfColor(128, 0, 0)
                    },
                    cell: {
                        backgroundColor: new PdfColor(240, 248, 255),
                        fontColor: new PdfColor(0, 0, 0),
                        borderColor: new PdfColor(179, 219, 255)
                    },
                    fontFamily: 1,
                    eventMarker: {
                        label: {
                            backgroundColor: new PdfColor(255, 239, 213),
                            fontFamily: PdfFontFamily.TimesRoman,
                            fontColor: new PdfColor(139, 69, 19),
                            fontSize: 9,
                            format: stringFormat,
                            fontStyle: PdfFontStyle.Bold,
                            borderColor: new PdfColor(160, 82, 45),
                            borders: borders
                        },
                        lineStyle: pen
                    },
                    holiday: {
                        fontFamily: PdfFontFamily.TimesRoman,
                        fontSize: 10,
                        fontStyle: PdfFontStyle.Bold,
                        borderColor: new PdfColor(211, 211, 211),
                        backgroundColor: new PdfColor(255, 248, 220),
                        fontColor: new PdfColor(105, 105, 105),
                        format: vertical,
                        borders: borders
                    }
                }
            };

            gantt.pdfExport(exportProperties);
        }
    },
    columns: [
        { field: 'TaskID', headerText: 'Task ID', width: 100 },
        { field: 'TaskName', headerText: 'Task Name', width: 150 },
        { field: 'StartDate', headerText: 'Start Date', width: 150 },
        { field: 'EndDate', headerText: 'End Date', width: 150 },
        { field: 'Duration', headerText: 'Duration', width: 150 },
        { field: 'Progress', headerText: 'Progress', width: 150 }
    ]
});

gantt.appendTo('#GanttExport');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Gantt Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/tailwind3.css" rel="stylesheet" type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='GanttExport'></div>
    </div>
    </script>
</body>

</html>

Customize split taskbar segment colors in PDF

The PDF export feature in the Gantt Chart allows you to customize the colors of split taskbar segments using the taskSegmentStyles property inside the pdfQueryTaskbarInfo event.

The taskSegmentStyles property contains a collection of style properties for task segments. By specifying the index of corresponding segment index in this collection you can customize that segment taskbar color, progress color, and its border color.

import {
    Gantt,
    Selection,
    Toolbar,
    Edit,
    PdfExport,
    IQueryTaskbarInfoEventArgs,
    PdfQueryTaskbarInfoEventArgs,
    EditSettingsModel,
    TaskFieldsModel
} from '@syncfusion/ej2-gantt';
import { PdfColor } from '@syncfusion/ej2-pdf-export';
import { GanttData } from './datasource.ts';

Gantt.Inject(Selection, Toolbar, Edit, PdfExport);

const taskFields: TaskFieldsModel = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    endDate: 'EndDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID',
    segments: 'Segments'
};

const editSettings: EditSettingsModel = {
    allowEditing: true,
    allowDeleting: true,
    allowTaskbarEditing: true,
    showDeleteConfirmDialog: true
};

let gantt: Gantt = new Gantt({
    id: 'ganttDefault',
    dataSource: GanttData,
    height: '450px',
    taskFields: taskFields,
    editSettings: editSettings,
    toolbar: ['PdfExport'],
    gridLines: 'Both',
    allowPdfExport: true,
    columns: [
        { field: 'TaskID', headerText: 'Task ID' },
        { field: 'TaskName', headerText: 'Task Name' },
        { field: 'StartDate', headerText: 'Start Date' },
        { field: 'EndDate', headerText: 'End Date' }
    ],
    toolbarClick: (args: any) => {
        if (args.item.id === 'GanttExport_pdfexport') {
            gantt.pdfExport();
        }
    },
    queryTaskbarInfo: (args: IQueryTaskbarInfoEventArgs) => {
        const taskData: any = (args.data as any).taskData;
        if (taskData.Segments) {
            const segmentIndex = (args.taskbarElement as HTMLElement | null).dataset.segmentIndex;
            if (Number(segmentIndex) === 1) {
                (args as any).taskbarBgColor = 'red';
                (args as any).taskbarBorderColor = 'black';
                (args as any).progressBarBgColor = 'green';
            }
        }
    },
    pdfQueryTaskbarInfo: (args: PdfQueryTaskbarInfoEventArgs) => {
        const taskbar: any = args.taskbar as any;
        if (taskbar.taskSegmentStyles && taskbar.taskSegmentStyles.length > 1) {
            taskbar.taskSegmentStyles[1].taskColor = new PdfColor(255, 0, 0);
            taskbar.taskSegmentStyles[1].progressColor = new PdfColor(0, 128, 0);
            taskbar.taskSegmentStyles[1].taskBorderColor = new PdfColor(0, 0, 0);
        }
    }
});

gantt.appendTo('#GanttExport');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Gantt Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
	<link href="https://cdn.syncfusion.com/ej2/33.2.3/tailwind3.css" rel="stylesheet" type="text/css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
        <div id='loader'>Loading....</div>
        <div id='container'>
            <div id='GanttExport'></div>        
        </div>   
 </script>
</body>

</html>

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 { Gantt, Toolbar, PdfExport, Selection, PdfQueryCellInfoEventArgs, ColumnModel, PdfExportProperties } from '@syncfusion/ej2-gantt';
import { data, resources } from './datasource.ts';

Gantt.Inject(Toolbar, PdfExport, Selection);

let gantt: Gantt = new Gantt({
    id: 'ganttDefault',
    dataSource: data,
    height: '430px',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        resourceInfo: 'resources',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    toolbar: ['PdfExport'],
    allowPdfExport: true,
    allowResizing: true,
    splitterSettings: { columnIndex: 4 },
    resources: resources,
    resourceFields: { id: 'resourceId', name: 'resourceName' },
    columns: [
        { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: 100 },
        { field: 'TaskName', headerText: 'Task Name', width: 150 },
        { field: 'resources', headerText: 'Resources', width: 250 },
        { field: 'EmailId', headerText: 'Email ID', width: 150 }
    ],
    toolbarClick: (args: any) => {
        if (args.item.id === 'GanttExport_pdfexport') {
            const exportProps: PdfExportProperties = { fileName: 'new.pdf' };
            gantt.pdfExport(exportProps);
        }
    },
    pdfQueryCellInfo: (args: PdfQueryCellInfoEventArgs) => {
        const col = args.column as ColumnModel;
        if (col && col.headerText === 'Resources') {
            const base64: string = (args.data as any).taskData.resourcesImage;
            (args as any).image = { height: 40, width: 40, base64: base64 };
        }
        if (col && col.headerText === 'Email ID') {
            const email: string = (args.data as any).taskData.EmailId;
            (args as any).hyperLink = { target: 'mailto:' + email, displayText: email };
        }
    }
});

gantt.appendTo('#GanttExport');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Gantt Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/tailwind3.css" rel="stylesheet" type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <script type="text/x-jsrender" id="columnTemplate">
        ${if(ganttProperties.resourceNames)}
        <div class="image">
            <img src="./images/${ganttProperties.resourceNames}.png" style="height:40px;width:40px" alt="${resourceName}" />
        </div>
        ${/if}
    </script>
    <script id="template2" type="text/x-template">
        ${if(taskData.EmailID)}
        <div class="link">
            <a href="mailto:${taskData.EmailID}">${taskData.EmailID}</a></div>
        </div>
        ${/if}
    </script>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='GanttExport'></div>
    </div>
    </script>
</body>

</html>

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 {
    Gantt,
    Toolbar,
    PdfExport,
    Selection,
    PdfQueryTaskbarInfoEventArgs,
    PdfExportProperties
} from '@syncfusion/ej2-gantt';
import { base64Data, editingResources } from './datasource.ts';

Gantt.Inject(Toolbar, PdfExport, Selection);

let gantt: Gantt = new Gantt({
    id: 'Gantt',
    dataSource: base64Data,
    height: '450px',
    rowHeight: 45,
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        child: 'subtasks',
        resourceInfo: 'resources'
    },
    resources: editingResources,
    resourceFields: {
        id: 'resourceId',
        name: 'resourceName'
    },
    splitterSettings: {
        columnIndex: 2
    },
    toolbar: ['PdfExport'],
    allowPdfExport: true,
    columns: [
        { field: 'TaskID' },
        { field: 'TaskName' }
    ],
    toolbarClick: (args: any) => {
        if (args.item.text === 'PDF export') {
            const exportProps: PdfExportProperties = {
                enableFooter: false
            };
            gantt.pdfExport(exportProps);
        }
    },
    pdfQueryTaskbarInfo: (args: PdfQueryTaskbarInfoEventArgs) => {
        const data: any = args.data;
        if (data.ganttProperties.resourceNames) {
            args.taskbarTemplate.image = [{
                width: 20,
                height: 20,
                base64: data.taskData.resourcesImage
            }];
            args.taskbarTemplate.value = data.TaskName;
        }
    }
});

gantt.appendTo('#GanttExport');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Gantt Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/tailwind3.css" rel="stylesheet" type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        .e-gantt .e-gantt-chart .e-gantt-milestone {
            position: absolute;
            transform: rotate(0deg) !important;
        }
    </style>
</head>

<body>

    <div id='loader'>Loading....</div>

    <script type="text/x-jsrender" id="TaskbarTemplate">
        <div class="e-gantt-child-taskbar-inner-div e-gantt-child-taskbar"  style="height:100%">
           <div class="e-gantt-child-progressbar-inner-div e-gantt-child-progressbar" style="width:${ganttProperties.progressWidth}px;height:100%">
            ${if(ganttProperties.resourceNames)}
            <div class="image">
                <img src="./images/${ganttProperties.resourceNames}.png" style="height:40px;width:40px" alt="${resourceName}" />
            </div>
            ${/if}
              <span class="e-task-label" style="position: absolute; z-index: 1;max-width:70%; font-size: 12px; color: white; top: 5px; left: 35px; font-family: "Segoe UI"; overflow: hidden; text-overflow: ellipsis; width: 40%; cursor: move;">${taskData.TaskName}</span>
           </div>
        </div>
    </script>

    <script type="text/x-jsrender" id="ParentTaskbarTemplate">
       <div class="e-gantt-parent-taskbar-inner-div e-gantt-parent-taskbar" style="height:100%">
          <div class="e-gantt-parent-progressbar-inner-div e-gantt-parent-progressbar" style="width:${ganttProperties.progressWidth}px;height:100%">
          <span class="e-task-label" style="position: absolute; z-index: 1; font-size: 12px; color: white; top: 5px; left: 10px; font-family: "Segoe UI"; overflow: hidden; text-overflow: ellipsis; width: 40%; cursor: move;">${taskData.TaskName}</span>
       </div>
       </div>
    </script>
    <script type="text/x-jsrender" id="MilestoneTemplate">
        <div style="margin-top=-7px;">
        <div class="e-gantt-milestone" style="position:absolute;">
            <div class="image" style="position:absolute;">
                <img class="moments" src="./images/${ganttProperties.resourceNames}.png" height="40px" width="40px" />
            </div>
            <div class="e-milestone-top" style="border-right-width:20px; margin-top: -2px;border-left-width:20px;border-bottom-width:20px;"></div>
            <div class="e-milestone-bottom" style="top:26px;border-right-width:20px; border-left-width:20px; border-top-width:20px;"></div>
        </div>
    </div>
     </script>
    </script>
    <div id='container'>
        <div id='GanttExport'></div>
    </div>
    </script>
</body>

</html>

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 {
    Gantt,
    Toolbar,
    PdfExport,
    Selection,
    PdfExportProperties,
    PdfQueryTaskbarInfoEventArgs
} from '@syncfusion/ej2-gantt';
import { base64Data, editingResources } from './datasource.ts';

Gantt.Inject(Toolbar, PdfExport, Selection);

let gantt: Gantt = new Gantt({
    id: 'Gantt',
    dataSource: base64Data,
    height: '450px',
    rowHeight: 60,
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        child: 'subtasks',
        resourceInfo: 'resources'
    },
    resources: editingResources,
    resourceFields: {
        id: 'resourceId',
        name: 'resourceName'
    },
    projectStartDate: new Date('03/24/2019'),
    projectEndDate: new Date('04/30/2019'),
    splitterSettings: {
        columnIndex: 2
    },
    labelSettings: {
        leftLabel: '${TaskName} [ ${Progress}% ]',
        rightLabel: '${resourceNames}',
        taskLabel: '${Progress}%'
    },
    toolbar: ['PdfExport'],
    allowPdfExport: true,
    columns: [
        { field: 'TaskID' },
        { field: 'TaskName' }
    ],
    toolbarClick: (args: any) => {
        if (args.item.id === 'GanttExport_pdfexport') {
            const exportProps: PdfExportProperties = { enableFooter: false };
            gantt.pdfExport(exportProps);
        }
    },
    pdfQueryTaskbarInfo: (args: PdfQueryTaskbarInfoEventArgs) => {
        const gp: any = (args.data as any).ganttProperties;

        if (args.labelSettings && gp) {
            args.labelSettings.leftLabel.value = `${gp.taskName}[${gp.progress}]`;

            if (gp.resourceNames) {
                args.labelSettings.rightLabel.value = gp.resourceNames;
                args.labelSettings.rightLabel.image = [{
                    base64: (args.data as any).taskData.resourcesImage,
                    width: 20,
                    height: 20
                }];
            }

            args.labelSettings.taskLabel.value = `${gp.progress}%`;
        }
    }
});

gantt.appendTo('#GanttExport');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Gantt Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/tailwind3.css" rel="stylesheet" type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    
    <div id='loader'>Loading....</div>

    <script type="text/x-template" id="leftLabel">
        <div style="margin-top=-7px;">
            <div id = "leftLabel">
                <span>${TaskName} [ ${TaskID}]</span>
            </div>
        </div>
    </script>
    
    <script type="text/x-template" id="rightLabel">
        <div style="margin-top=-7px;">
        ${if(ganttProperties.resourceInfo)}
        <div id = "rightLabel">
            ${getResourceElements(ganttProperties.resourceInfo)}
        </div>
        ${/if}
    </div>
    </script>
    <div id='container'>
        <div id='GanttExport'></div>
    </div>
    </script>
</body>

</html>

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 { Gantt, Toolbar, PdfExport, Selection, PdfExportProperties, PdfColumnHeaderQueryCellInfoEventArgs, pdfQueryTaskbarInfo, PdfQueryCellInfoEventArgs } from '@syncfusion/ej2-gantt';
import { GanttData, editingResources } from './datasource.ts';
import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';

Gantt.Inject(Toolbar, PdfExport, Selection);

let clickHandler: EmitType<ClickEventArgs> = (args: ClickEventArgs) => {
    if (args.item.id === 'GanttExport_pdfexport') {
        let exportProperties: PdfExportProperties = {
            enableFooter: false
        };
        gantt.pdfExport(exportProperties);
    }
};
let i: number = 0;
let pdfColumnHeaderQueryCellInfo = (args: PdfColumnHeaderQueryCellInfoEventArgs) => {
    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 (i < base64Array.length) {
        const key = Object.keys(base64Array[i])[0];
        const value = base64Array[i][key];
        if (key === args.column.field) {
            args.headerTemplate.image = [{
                base64: value, width: 20, height: 20
            }];
            args.headerTemplate.value = args.column.field;
            break;
        }
        i++;
    }
}

let gantt: Gantt = new Gantt({
    dataSource: GanttData,
    height: '450px',
    rowHeight: 45,
    taskbarHeight: 35,
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        progress: 'Progress',
        duration: 'Duration',
        resourceInfo: 'resources',
        dependency: 'Predecessor',
        parentID: 'ParentID'
    },
    columns: [
        { field: 'TaskName', headerTemplate: '#projectName', width: 250 },
        { field: 'StartDate', headerTemplate: '#dateTemplate' }
    ],
    pdfColumnHeaderQueryCellInfo: pdfColumnHeaderQueryCellInfo,
    allowPdfExport: true,
    toolbar: ['PdfExport'],
    toolbarClick: clickHandler,
    resources: editingResources,
    resourceFields: {
        id: 'resourceId',
        name: 'resourceName'
    },
    projectStartDate: new Date('03/24/2019'),
    projectEndDate: new Date('04/30/2019'),
});
gantt.appendTo('#GanttExport');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Gantt Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/tailwind3.css" rel="stylesheet" type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    
    <div id='loader'>Loading....</div>

    <script type="text/x-template" id="projectName">
        <div>
            <div>
                <img class="taskName" src="images/Task name.png" width="20" height="20" />  Task Name
            </div>
        </div>
    </script>
    <script type="text/x-template" id="dateTemplate">
        <div>
            <div>
                <img class="startDate" src="images/Start date.png" width="20" height="20" />  Start Date
            </div>
        </div>
    </script>
    <div id='container'>
        <div id='GanttExport'></div>
    </div>
    </script>
</body>

</html>

See also