PDF Export in EJ2 JavaScript Gantt Chart Control
2 Jul 202624 minutes to read
PDF export in the EJ2 JavaScript Gantt Chart control enables exporting project data to PDF documents for sharing or archiving, using the pdfExport method with allowPdfExport set to true and PdfExport module injected. This feature supports exporting timelines, tasks, and dependencies, with options for indicators via base64 images, blob objects for previews, single-page layouts, multiple Gantt instances in one file, and themes like Tailwind3 or Bootstrap. Focus on auto-scheduled tasks for accurate export, as manual scheduling is not currently supported.
Export basic Gantt data
Export Gantt data to PDF by setting allowPdfExport to true and calling pdfExport, which generates a document with the chart and tree-grid data.
var clickHandler = function(args){
if (args.item.id === 'GanttExport_pdfexport') {
ganttChart.pdfExport();
}
};
var ganttChart = new ej.gantt.Gantt({
dataSource: GanttData,
height: '450px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
},
allowPdfExport: true,
toolbar: ['PdfExport'],
toolbarClick: clickHandler
});
ganttChart.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/34.1.29/tailwind3.css" rel="stylesheet" type="text/css">
<script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="GanttExport"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body>
</html>Include indicators in PDF export
Include dynamic indicators and images in PDF export by defining them with base64 encoding in the data source, mapped to the taskFields.indicators property, enhancing visual representation of task status.
var clickHandler = function(args){
if (args.item.id === 'GanttExport_pdfexport') {
ganttChart.pdfExport();
}
};
var ganttChart = new ej.gantt.Gantt({
dataSource: GanttData,
height: '450px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID',
indicators: 'Indicators'
},
allowPdfExport: true,
toolbar: ['PdfExport'],
toolbarClick: clickHandler
});
ganttChart.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/34.1.29/tailwind3.css" rel="stylesheet" type="text/css">
<script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="GanttExport"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body>
</html>Export Gantt data as blob object
Export Gantt data as a blob object for previews or modifications by setting the fourth argument of pdfExport to true, with the blob returned in the pdfExportComplete event.
var ganttChart = new ej.gantt.Gantt({
id: 'ganttDefault',
dataSource: GanttData,
height: '430px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
},
treeColumnIndex: 1,
toolbar: ['PdfExport', 'ExcelExport'],
allowPdfExport: true,
allowExcelExport: true,
columns: [
{ field: 'TaskID' },
{ field: 'TaskName' },
{ field: 'StartDate' },
{ field: 'Duration' },
{ field: 'Progress' }
],
toolbarClick: function (args) {
if (args.item.id === 'GanttExport_pdfexport') {
ganttChart.pdfExport(null, null, null, true);
}
if (args.item.id === 'GanttExport_excelexport') {
ganttChart.excelExport(null, null, null, true);
}
},
excelExportComplete: function (args) {
args.promise.then(function (e) {
exportBlob(e.blobData);
});
},
pdfExportComplete: function (args) {
args.promise.then(function (e) {
exportBlob(e.blobData);
});
}
});
ganttChart.appendTo('#GanttExport');
function exportBlob(blob) {
var a = document.createElement('a');
document.body.appendChild(a);
a.style.display = 'none';
var url = window.URL.createObjectURL(blob);
a.href = url;
a.download = 'Export';
a.click();
window.URL.revokeObjectURL(url);
document.body.removeChild(a);
}<!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/34.1.29/tailwind3.css" rel="stylesheet" type="text/css">
<script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="GanttExport"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body>
</html>Single page exporting in Gantt
Export Gantt rows to a single PDF page by setting fitToWidthSettings.isFitToWidth to true in PdfExportProperties. Customize chart and grid widths using chartWidth and gridWidth as percentages.
var clickHandler = function (args) {
if (args.item.id === 'GanttExport_pdfexport') {
var exportProperties = {
fitToWidthSettings: {
isFitToWidth: true,
}
};
ganttChart.pdfExport(exportProperties);
}
};
var ganttChart = new ej.gantt.Gantt({
dataSource: GanttData,
dateFormat: 'MMM dd, y',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
parentID: 'ParentID',
},
columns: [
{ field: 'TaskID', width: 80 },
{ field: 'TaskName', width: 250 },
{ field: 'StartDate' },
{ field: 'EndDate' },
{ field: 'Duration' },
{ field: 'Predecessor' },
{ field: 'Progress' }
],
splitterSettings: {
columnIndex: 2
},
allowPdfExport: true,
toolbar: ['PdfExport'],
toolbarClick: clickHandler,
allowSelection: true,
gridLines: 'Both',
height: '450px',
treeColumnIndex: 1,
highlightWeekends: true,
timelineSettings: {
topTier: {
unit: 'Week',
format: 'MMM dd, y',
},
bottomTier: {
unit: 'Day',
},
},
labelSettings: {
leftLabel: 'TaskName',
},
projectStartDate: new Date('03/25/2019'),
projectEndDate: new Date('07/28/2019')
});
ganttChart.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/34.1.29/tailwind3.css" rel="stylesheet" type="text/css">
<script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="GanttExport"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body>
</html>Multiple Gantt exporting
Export multiple Gantt instances to a single PDF file by calling pdfExport on each, with each Gantt exported to a new page in the same document.
var firstGantt = new ej.gantt.Gantt({
dataSource: FirstGanttData,
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'parentID',
},
treeColumnIndex: 1,
allowPdfExport: true,
toolbar: ['PdfExport'],
projectStartDate: new Date('03/31/2019'),
projectEndDate: new Date('04/14/2019'),
height: 280,
});
firstGantt.appendTo('#GanttExport1');
var secondGantt = new ej.gantt.Gantt({
dataSource: SecondGanttData,
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'parentID',
},
treeColumnIndex: 1,
allowPdfExport: true,
height: 250,
});
secondGantt.appendTo('#GanttExport2');
firstGantt.toolbarClick = function (args) {
if (args.item.id === 'GanttExport1_pdfexport') {
var firstGanttPdfExport = firstGantt.pdfExport({}, true);
firstGanttPdfExport.then(function (pdfData) {
secondGantt.pdfExport({}, false, pdfData);
});
}
}<!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/34.1.29/tailwind3.css" rel="stylesheet" type="text/css">
<script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="GanttExport1"></div>
<div id="GanttExport2" style="margin-top:10px"></div>
</div>
<script>
var ele = document.getElementById('container');
if (ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body>
</html>Apply themes in PDF export
Apply themes to exported PDF documents by setting the theme property in PdfExportProperties to values like Tailwind3, Fabric, Bootstrap, or Bootstrap4, customizing the appearance.
var clickHandler = function (args) {
if (args.item.id === 'GanttExport_pdfexport') {
var exportProperties = {
theme: "Fabric"
};
ganttChart.pdfExport(exportProperties);
}
};
var ganttChart = new ej.gantt.Gantt({
dataSource: GanttData,
height: '450px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
},
allowPdfExport: true,
toolbar: ['PdfExport'],
toolbarClick: clickHandler
});
ganttChart.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/34.1.29/tailwind3.css" rel="stylesheet" type="text/css">
<script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="GanttExport"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body>
</html>