Contents
- File name for exported document
- How to change page orientation
- How to change page size
- Export current view data
- Export hidden columns
- Export predecessor lines
- Show or hide columns on exported PDF
- Conditional cell formatting
- Timeline cell formatting
- Taskbar formatting
- Customize Gantt Chart Appearance in PDF Export
- Customize Split Taskbar Segment Colors in PDF
- Exporting with templates
To customize PDF export
26 Mar 202524 minutes to read
PDF export provides an option to customize the mapping of Gantt to exported PDF document.
File name for exported document
The file name of the exported PDF document can be specified using the fileName property in pdfExportProperties.
<template>
<div>
<ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :toolbar="toolbar" :toolbarClick="toolbarClick" :allowPdfExport='true' :height="height"></ejs-gantt>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GanttComponent as EjsGantt, Toolbar, PdfExport, Selection } from "@syncfusion/ej2-vue-gantt";
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import {editingData } from './data-source.js';
const gantt = ref(null);
const data = editingData;
const height = '450px';
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const toolbar = ['PdfExport'];
const toolbarClick = (args) => {
if (args.item.id === 'GanttContainer_pdfexport') {
var exportProperties = {
fileName:"new.pdf"
};
var ganttChart = gantt.value.ej2Instances;
ganttChart.pdfExport(exportProperties);
}
};
provide('gantt', [Toolbar, PdfExport]);
</script><template>
<div>
<ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :toolbar="toolbar" :toolbarClick="toolbarClick" :allowPdfExport='true' :height="height"></ejs-gantt>
</div>
</template>
<script>
import { GanttComponent, Toolbar, PdfExport, Selection } from "@syncfusion/ej2-vue-gantt";
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import {editingData } from './data-source.js';
export default {
name: "App",
components: {
"ejs-gantt":GanttComponent
},
data: function() {
return{
data:editingData,
height:'450px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
},
toolbar: ['PdfExport'],
toolbarClick: (args) => {
if (args.item.id === 'GanttContainer_pdfexport') {
var exportProperties = {
fileName:"new.pdf"
};
var ganttChart = document.getElementById('GanttContainer').ej2_instances[0];
ganttChart.pdfExport(exportProperties);
}
},
};
},
provide: {
gantt: [Toolbar, PdfExport]
}
};
</script>How to change page orientation
The page orientation of the exported PDF document can be customized using the pageOrientation property in pdfExportProperties. By default, the exported PDF document is in Landscape orientation.
<template>
<div>
<ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :toolbar="toolbar" :toolbarClick="toolbarClick" :allowPdfExport='true' :height="height"></ejs-gantt>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GanttComponent as EjsGantt, Toolbar, PdfExport, Selection } from "@syncfusion/ej2-vue-gantt";
import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
import {editingData } from './data-source.js';
const gantt = ref(null);
const data = editingData;
const height = '450px';
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const toolbar = ['PdfExport'];
const toolbarClick = (args) => {
if (args.item.id === 'GanttContainer_pdfexport') {
var exportProperties = {
fileName:"new.pdf"
};
var ganttChart = gantt.value.ej2Instances;
ganttChart.pdfExport(exportProperties);
}
};
provide('gantt', [Toolbar, PdfExport]);
</script><template>
<div>
<ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :toolbar="toolbar" :toolbarClick="toolbarClick" :allowPdfExport='true' :height="height"></ejs-gantt>
</div>
</template>
<script>
import { GanttComponent, Toolbar, PdfExport, Selection } from "@syncfusion/ej2-vue-gantt";
import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
import {editingData } from './data-source.js';
export default {
name: "App",
components: {
"ejs-gantt":GanttComponent
},
data: function() {
return{
data:editingData,
height:'450px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
},
toolbar: ['PdfExport'],
toolbarClick: (args) => {
if (args.item.id === 'GanttContainer_pdfexport') {
var exportProperties = {
pageOrientation: 'Portrait'
};
var ganttChart = document.getElementById('GanttContainer').ej2_instances[0];
ganttChart.pdfExport(exportProperties);
}
},
};
},
provide: {
gantt: [Toolbar, PdfExport]
}
};
</script>How to change 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
- A1
- A2
- A3
- A5
- A6
- A7
- A8
- A9
- B0
- B1
- B2
- B3
- B4
- B5
- Archa
- Archb
- Archc
- Archd
- Arche
- Flsa
- HalfLetter
- Letter11x17
- Ledger
<template>
<div>
<ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :toolbar="toolbar"
:toolbarClick="toolbarClick" :allowPdfExport='true' :height="height"></ejs-gantt>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GanttComponent as EjsGantt, Toolbar, PdfExport, Selection, PdfExportProperties } from "@syncfusion/ej2-vue-gantt";
import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
import { editingData } from './data-source.js';
const gantt = ref(null);
const data = editingData;
const height = '450px';
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const toolbar = ['PdfExport'];
const toolbarClick = (args) => {
if (args.item.id === 'GanttContainer_pdfexport') {
var exportProperties = {
pageSize: 'A0'
};
var ganttChart = gantt.value.ej2Instances;
ganttChart.pdfExport(exportProperties);
}
};
provide('gantt', [Toolbar, PdfExport]);
</script><template>
<div>
<ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :toolbar="toolbar" :toolbarClick="toolbarClick" :allowPdfExport='true' :height="height"></ejs-gantt>
</div>
</template>
<script>
import { GanttComponent, Toolbar, PdfExport, Selection, PdfExportProperties } from "@syncfusion/ej2-vue-gantt";
import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
import {editingData } from './data-source.js';
export default {
name: "App",
components: {
"ejs-gantt":GanttComponent
},
data: function() {
return{
data:editingData,
height:'450px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
},
toolbar: ['PdfExport'],
toolbarClick: (args) => {
if (args.item.id === 'GanttContainer_pdfexport') {
var exportProperties = {
pageSize: 'A0'
};
var ganttChart = document.getElementById('GanttContainer').ej2_instances[0];
ganttChart.pdfExport(exportProperties);
}
},
};
},
provide: {
gantt: [Toolbar, PdfExport]
}
};
</script>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.
<template>
<div>
<ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :toolbar="toolbar" :toolbarClick="toolbarClick" :allowPdfExport='true' :height="height"></ejs-gantt>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GanttComponent as EjsGantt, Toolbar, PdfExport, Selection, Filter, PdfExportProperties } from "@syncfusion/ej2-vue-gantt";
import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
import {editingData } from './data-source.js';
const gantt = ref(null);
const data = editingData;
const height = '450px';
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const toolbar = ['PdfExport'];
const toolbarClick = (args) => {
if (args.item.id === 'GanttContainer_pdfexport') {
var exportProperties = {
exportType: 'CurrentViewData'
};
var ganttChart = gantt.value.ej2Instances;
ganttChart.pdfExport(exportProperties);
}
};
provide('gantt', [Toolbar, PdfExport]);
</script><template>
<div>
<ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :toolbar="toolbar" :toolbarClick="toolbarClick" :allowPdfExport='true' :height="height"></ejs-gantt>
</div>
</template>
<script>
import { GanttComponent, Toolbar, PdfExport, Selection, Filter, PdfExportProperties } from "@syncfusion/ej2-vue-gantt";
import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
import {editingData } from './data-source.js';
export default {
name: "App",
components: {
"ejs-gantt":GanttComponent
},
data: function() {
return{
data:editingData,
height:'450px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
},
toolbar: ['PdfExport'],
toolbarClick: (args) => {
if (args.item.id === 'GanttContainer_pdfexport') {
var exportProperties = {
exportType: 'CurrentViewData'
};
var ganttChart = document.getElementById('GanttContainer').ej2_instances[0];
ganttChart.pdfExport(exportProperties);
}
},
};
},
provide: {
gantt: [Toolbar, PdfExport]
}
};
</script>Export hidden columns
PDF export provides an option to export hidden columns of Gantt by defining the includeHiddenColumn to true.
<template>
<div>
<ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :columns="columns" :toolbar="toolbar" :toolbarClick="toolbarClick" :allowPdfExport='true' :height="height"></ejs-gantt>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GanttComponent as EjsGantt, Toolbar, PdfExport, Selection, PdfExportProperties } from "@syncfusion/ej2-vue-gantt";
import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
import { ganttData } from './data-source.js';
const gantt = ref(null);
const data = ganttData;
const height = '450px';
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const columns = [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', 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' },
];
const toolbar = ['PdfExport'];
const toolbarClick = (args) => {
if (args.item.id === 'GanttContainer_pdfexport') {
var exportProperties = {
includeHiddenColumn: true
};
var ganttChart = gantt.value.ej2Instances;
ganttChart.pdfExport(exportProperties);
}
};
provide('gantt', [Toolbar, PdfExport]);
</script><template>
<div>
<ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :columns="columns" :toolbar="toolbar" :toolbarClick="toolbarClick" :allowPdfExport='true' :height="height"></ejs-gantt>
</div>
</template>
<script>
import { Gantt, Toolbar, PdfExport, Selection, PdfExportProperties } from "@syncfusion/ej2-vue-gantt";
import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
import { ganttData } from './data-source.js';
export default {
name: "App",
components: {
"ejs-gantt":GanttComponent
},
data: function() {
return{
data: ganttData,
height:'450px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
},
columns: [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', 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'],
toolbarClick: (args) => {
if (args.item.id === 'GanttContainer_pdfexport') {
var exportProperties = {
includeHiddenColumn: true
};
var ganttChart = document.getElementById('GanttContainer').ej2_instances[0];
ganttChart.pdfExport(exportProperties);
}
},
};
},
provide: {
gantt: [Toolbar, PdfExport]
}
};
</script>Export predecessor lines
The visibility of predecessor lines in the exported PDF document can be controlled using the showPredecessorLines property.
<template>
<div>
<ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :columns="columns" :toolbar="toolbar" :toolbarClick="toolbarClick" :allowPdfExport='true' :height="height"></ejs-gantt>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GanttComponent as EjsGantt, Toolbar, PdfExport, Selection, PdfExportProperties } from "@syncfusion/ej2-vue-gantt";
// import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
import {editingData } from './data-source.js';
const gantt = ref(null);
const data = editingData;
const height = '450px';
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const columns = [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
{ field: 'TaskName', headerText: 'Task Name', width: '150' },
{ field: 'StartDate', headerText: 'Start Date', width: '150', visible: false },
{ field: 'Duration',headerText: 'Duration', width: '150'},
{ field: 'Progress', headerText: 'Progress', width: '150' },
];
const toolbar = ['PdfExport'];
const toolbarClick = (args) => {
if (args.item.id === 'GanttContainer_pdfexport') {
var exportProperties = {
showPredecessorLines: true
};
var ganttChart = gantt.value.ej2Instances;
ganttChart.pdfExport(exportProperties);
}
};
provide('gantt', [Toolbar, PdfExport]);
</script><template>
<div>
<ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :columns="columns" :toolbar="toolbar" :toolbarClick="toolbarClick" :allowPdfExport='true' :height="height"></ejs-gantt>
</div>
</template>
<script>
import { GanttComponent, Toolbar, PdfExport, Selection, PdfExportProperties } from "@syncfusion/ej2-vue-gantt";
import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
import {editingData } from './data-source.js';
export default {
name: "App",
components: {
"ejs-gantt":GanttComponent
},
data: function() {
return{
data:editingData,
height:'450px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
},
columns: [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
{ field: 'TaskName', headerText: 'Task Name', width: '150' },
{ field: 'StartDate', headerText: 'Start Date', width: '150', visible: false },
{ field: 'Duration',headerText: 'Duration', width: '150'},
{ field: 'Progress', headerText: 'Progress', width: '150' },
],
toolbar: ['PdfExport'],
toolbarClick: (args) => {
if (args.item.id === 'GanttContainer_pdfexport') {
var exportProperties = {
showPredecessorLines: true
};
var ganttChart = document.getElementById('GanttContainer').ej2_instances[0];
ganttChart.pdfExport(exportProperties);
}
},
};
},
provide: {
gantt: [Toolbar, PdfExport]
}
};
</script>Show or hide columns on exported PDF
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.
<template>
<div>
<ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :columns="columns" :toolbar="toolbar" :toolbarClick="toolbarClick" :allowPdfExport='true' :beforePdfExport="beforePdfExport" :height="height"></ejs-gantt>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GanttComponent as EjsGantt, Toolbar, PdfExport, Selection } from "@syncfusion/ej2-vue-gantt";
import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
import {editingData } from './data-source.js';
const gantt = ref(null);
const data = editingData;
const height = '450px';
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const columns = [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
{ field: 'TaskName', headerText: 'Task Name', width: '150' },
{ field: 'StartDate', headerText: 'Start Date', width: '150'},
{ field: 'Duration',headerText: 'Duration', width: '150', visible: false },
{ field: 'Progress', headerText: 'Progress', width: '150' },
];
const toolbar = ['PdfExport'];
const toolbarClick = (args) => {
if (args.item.id === 'GanttContainer_pdfexport') {
var ganttChart = gantt.value.ej2Instances;
ganttChart.pdfExport();
}
};
const beforePdfExport = (args) => {
var obj = gantt.value.ej2Instances;
obj.treeGrid.columns[3].visible = true;
obj.treeGrid.columns[2].visible = false;
}
provide('gantt', [Toolbar, PdfExport]);
</script><template>
<div>
<ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :columns="columns" :toolbar="toolbar" :toolbarClick="toolbarClick" :allowPdfExport='true' :beforePdfExport="beforePdfExport" :height="height"></ejs-gantt>
</div>
</template>
<script>
import { GanttComponent, Toolbar, PdfExport, Selection } from "@syncfusion/ej2-vue-gantt";
import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
import {editingData } from './data-source.js';
export default {
name: "App",
components: {
"ejs-gantt":GanttComponent
},
data: function() {
return{
data:editingData,
height:'450px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
},
columns: [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
{ field: 'TaskName', headerText: 'Task Name', width: '150' },
{ field: 'StartDate', headerText: 'Start Date', width: '150'},
{ field: 'Duration',headerText: 'Duration', width: '150', visible: false },
{ field: 'Progress', headerText: 'Progress', width: '150' },
],
toolbar: ['PdfExport'],
toolbarClick: (args) => {
if (args.item.id === 'GanttContainer_pdfexport') {
var ganttChart = document.getElementById('GanttContainer').ej2_instances[0];
ganttChart.pdfExport();
}
},
beforePdfExport :(args) => {
var obj = (document.getElementById('GanttContainer')).ej2_instances[0]
obj.treeGrid.columns[3].visible = true;
obj.treeGrid.columns[2].visible = false;
}
};
},
provide: {
gantt: [Toolbar, PdfExport]
}
};
</script>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.
<template>
<div>
<ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :columns="columns" :toolbar="toolbar" :toolbarClick="toolbarClick" :allowPdfExport='true' :pdfQueryCellInfo="pdfQueryCellInfo" :height="height"></ejs-gantt>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GanttComponent as EjsGantt, Toolbar, PdfExport } from "@syncfusion/ej2-vue-gantt";
import { PdfColor } from '@syncfusion/ej2-pdf-export';
import {editingData } from './data-source.js';
const data = editingData;
const height = '450px';
const taskFields = {
id: 'TaskId',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID:'ParentId'
};
const columns = [
{ field: 'TaskId', headerText: 'Task ID', textAlign: 'Left', width: '100' },
{ field: 'TaskName', headerText: 'Task Name', width: '150' },
{ field: 'StartDate', headerText: 'Start Date', width: '150'},
{ field: 'Duration',headerText: 'Duration', width: '150', visible: false },
{ field: 'Progress', headerText: 'Progress', width: '150' },
];
const toolbar = ['PdfExport'];
const toolbarClick = (args) => {
if (args.item.id === 'GanttContainer_pdfexport') {
var ganttChart = gantt.value.ej2Instances;
ganttChart.pdfExport();
}
};
const pdfQueryCellInfo = (args) => {
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);
}
}
};
provide('gantt', [Toolbar, PdfExport]);
</script><template>
<div>
<ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :columns="columns"
:toolbar="toolbar" :toolbarClick="toolbarClick" :allowPdfExport='true' :pdfQueryCellInfo="pdfQueryCellInfo"
:height="height"></ejs-gantt>
</div>
</template>
<script>
import { GanttComponent, Toolbar, PdfExport } from "@syncfusion/ej2-vue-gantt";
import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
import { editingData } from './data-source.js';
import { PdfColor } from '@syncfusion/ej2-pdf-export';
export default {
name: "App",
components: {
"ejs-gantt": GanttComponent
},
data: function () {
return {
data: editingData,
height: '450px',
taskFields: {
id: 'TaskId',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID:'ParentId'
},
columns: [
{ field: 'TaskId', headerText: 'Task ID', textAlign: 'Left', width: '100' },
{ field: 'TaskName', headerText: 'Task Name', width: '150' },
{ field: 'StartDate', headerText: 'Start Date', width: '150' },
{ field: 'Duration', headerText: 'Duration', width: '150', visible: false },
{ field: 'Progress', headerText: 'Progress', width: '150' },
],
toolbar: ['PdfExport'],
toolbarClick: (args) => {
if (args.item.id === 'GanttContainer_pdfexport') {
var ganttChart = document.getElementById('GanttContainer').ej2_instances[0];
ganttChart.pdfExport();
}
},
pdfQueryCellInfo: (args) => {
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);
}
}
}
}
},
provide: {
gantt: [Toolbar, PdfExport]
}
};
</script>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.headerBackgroundColor property.
<template>
<div>
<ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields"
:columns="columns" :toolbar="toolbar" :toolbarClick="toolbarClick" :allowPdfExport='true' :pdfQueryTimelineCellInfo="pdfQueryTimelineCellInfo" :height="height"></ejs-gantt>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GanttComponent as EjsGantt, Toolbar, PdfExport, Selection, PdfQueryTimelineCellInfoEventArgs } from "@syncfusion/ej2-vue-gantt";
import { PdfColor } from '@syncfusion/ej2-pdf-export';
import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
import {editingData } from './data-source.js';
const gantt = ref(null);
const data = editingData;
const height = '450px';
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const columns = [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
{ field: 'TaskName', headerText: 'Task Name', width: '150' },
{ field: 'StartDate', headerText: 'Start Date', width: '150'},
{ field: 'Duration',headerText: 'Duration', width: '150', visible: false },
{ field: 'Progress', headerText: 'Progress', width: '150' },
];
const toolbar = ['PdfExport'];
const toolbarClick = (args) => {
if (args.item.id === 'GanttContainer_pdfexport') {
var ganttChart = gantt.value.ej2Instances;
ganttChart.pdfExport();
}
};
const pdfQueryTimelineCellInfo = (args) => {
args.timelineCell.backgroundColor = new PdfColor(240, 248, 255);
};
provide('gantt', [Toolbar, PdfExport]);
</script><template>
<div>
<ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields"
:columns="columns" :toolbar="toolbar" :toolbarClick="toolbarClick" :allowPdfExport='true' :pdfQueryTimelineCellInfo="pdfQueryTimelineCellInfo" :height="height"></ejs-gantt>
</div>
</template>
<script>
import { GanttComponent, Toolbar, PdfExport, Selection, PdfQueryTimelineCellInfoEventArgs } from "@syncfusion/ej2-vue-gantt";
import { PdfColor } from '@syncfusion/ej2-pdf-export';
import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
import {editingData } from './data-source.js';
export default {
name: "App",
components: {
"ejs-gantt":GanttComponent
},
data: function() {
return{
data:editingData,
height:'450px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
},
columns: [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
{ field: 'TaskName', headerText: 'Task Name', width: '150' },
{ field: 'StartDate', headerText: 'Start Date', width: '150'},
{ field: 'Duration',headerText: 'Duration', width: '150', visible: false },
{ field: 'Progress', headerText: 'Progress', width: '150' },
],
toolbar: ['PdfExport'],
toolbarClick: (args) => {
if (args.item.id === 'GanttContainer_pdfexport') {
var ganttChart = document.getElementById('GanttContainer').ej2_instances[0];
ganttChart.treeGrid.grid.columns[2].visible = false;
ganttChart.pdfExport();
}
},
pdfQueryTimelineCellInfo: (args) => {
args.timelineCell.backgroundColor = new PdfColor(240, 248, 255);
}
}
},
provide: {
gantt: [Toolbar, PdfExport]
}
};
</script>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.
<template>
<div>
<ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields"
:columns="columns" :toolbar="toolbar" :toolbarClick="toolbarClick" :allowPdfExport='true' :pdfQueryTaskbarInfo="pdfQueryTaskbarInfo" :height="height"></ejs-gantt>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GanttComponent as EjsGantt, Toolbar, PdfExport, Selection } from "@syncfusion/ej2-vue-gantt";
import { PdfColor } from '@syncfusion/ej2-pdf-export';
import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
import {editingData } from './data-source.js';
const gantt = ref(null);
const data = editingData;
const height = '450px';
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const columns = [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', 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' },
];
const toolbar = ['PdfExport'];
const toolbarClick = (args) => {
if (args.item.id === 'GanttContainer_pdfexport') {
var ganttChart = gantt.value.ej2Instances;
ganttChart.treeGrid.grid.columns[2].visible = false;
ganttChart.pdfExport();
}
};
const pdfQueryTaskbarInfo = (args) => {
if(args.data.Progress < 50 && !args.data.hasChildRecords) {
args.taskbar.progressColor = new PdfColor(205, 92, 92);
args.taskbar.taskColor = args.taskbar.taskBorderColor = new PdfColor(240, 128, 128);
}
};
provide('gantt', [Toolbar, PdfExport]);
</script><template>
<div>
<ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :columns="columns"
:toolbar="toolbar" :toolbarClick="toolbarClick" :allowPdfExport='true'
:pdfQueryTaskbarInfo="pdfQueryTaskbarInfo" :height="height"></ejs-gantt>
</div>
</template>
<script>
import { GanttComponent, Toolbar, PdfExport, Selection } from "@syncfusion/ej2-vue-gantt";
import { PdfColor } from '@syncfusion/ej2-pdf-export';
import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
import { editingData } from './data-source.js';
export default {
name: "App",
components: {
"ejs-gantt": GanttComponent
},
data: function () {
return {
data: editingData,
height: '450px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
},
columns: [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', 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'],
toolbarClick: (args) => {
if (args.item.id === 'GanttContainer_pdfexport') {
var ganttChart = document.getElementById('GanttContainer').ej2_instances[0];
ganttChart.treeGrid.grid.columns[2].visible = false;
ganttChart.pdfExport();
}
},
pdfQueryTaskbarInfo: (args) => {
if (args.data.Progress < 50 && !args.data.hasChildRecords) {
args.taskbar.progressColor = new PdfColor(205, 92, 92);
args.taskbar.taskColor = args.taskbar.taskBorderColor = new PdfColor(240, 128, 128);
}
}
}
},
provide: {
gantt: [Toolbar, PdfExport]
}
};
</script>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.
<template>
<div>
<ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :toolbar="toolbar"
:toolbarClick="toolbarClick" :allowPdfExport='true' :height="height" :eventMarkers = "eventMarkers" :holidays="holidays"></ejs-gantt>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GanttComponent as EjsGantt, Toolbar,PdfBorders, PdfPaddings, PdfExport, Selection, PdfExportProperties, DayMarkers } from "@syncfusion/ej2-vue-gantt";
import { PdfColor, PdfDashStyle, PdfFontFamily, PdfFontStyle, PdfPen, PdfStringFormat, PdfTextAlignment, PdfVerticalAlignment} from '@syncfusion/ej2-pdf-export';
import { editingData } from './data-source.js';
const gantt = ref(null);
const data = editingData;
const height = '450px';
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const eventMarkers =[
{
day: '04/10/2019',
cssClass: 'e-custom-event-marker',
label: 'Project approval and kick-off'
}
];
const 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"
}];
const toolbar = ['PdfExport'];
const toolbarClick = (args) => {
if (args.item.id === 'GanttContainer_pdfexport') {
const stringFormat = new PdfStringFormat();
stringFormat.alignment = PdfTextAlignment.Center;
const vertical = new PdfStringFormat();
vertical.alignment = PdfTextAlignment.Center;
const penColor = new PdfColor(105, 105, 105);
const penWidth = 1;
const pen = new PdfPen(penColor, penWidth);
pen.dashStyle = PdfDashStyle.Dash;
const borderWidth = 1;
const borderColor = new PdfColor(192, 192, 192);
let pdfpen = new PdfPen(borderColor, borderWidth);
let pdfborders = new PdfBorders();
pdfborders.all = pdfpen;
let exportProperties = {
ganttStyle: {
fontFamily: 1,
columnHeader: {
backgroundColor: new PdfColor(179, 219, 255)
},
taskbar: {
taskColor: new PdfColor(240, 128, 128),
taskBorderColor: new PdfColor(240, 128, 128),
progressColor: new PdfColor(205, 92, 92),
},
connectorLineColor: new PdfColor(128, 0, 0),
footer: {
backgroundColor: new PdfColor(205, 92, 92)
},
timeline: {
backgroundColor: new PdfColor(179, 219, 255),
padding: new PdfPaddings(5, 2, 0, 0),
},
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),
},
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: pdfborders,
},
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: pdfborders,
},
}
};
var ganttChart = gantt.value.ej2Instances;
ganttChart.pdfExport(exportProperties);
}
};
provide('gantt', [Toolbar, PdfExport, DayMarkers]);
</script><template>
<div>
<ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :toolbar="toolbar"
:toolbarClick="toolbarClick" :allowPdfExport='true' :eventMarkers="eventMarkers" :holidays="holidays"
:height="height"></ejs-gantt>
</div>
</template>
<script>
import { GanttComponent, Toolbar, PdfExport, Selection, PdfBorders, PdfPaddings, PdfExportProperties, DayMarkers } from "@syncfusion/ej2-vue-gantt";
import { PdfColor, PdfDashStyle, PdfFontFamily, PdfFontStyle, PdfPen, PdfStringFormat, PdfTextAlignment, PdfVerticalAlignment } from '@syncfusion/ej2-pdf-export';
import { editingData } from './data-source.js';
export default {
name: "App",
components: {
"ejs-gantt": GanttComponent
},
data: function () {
return {
data: editingData,
height: '450px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
},
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"
}],
toolbar: ['PdfExport'],
toolbarClick: (args) => {
if (args.item.id === 'GanttContainer_pdfexport') {
const stringFormat = new PdfStringFormat();
stringFormat.alignment = PdfTextAlignment.Center;
const vertical = new PdfStringFormat();
vertical.alignment = PdfTextAlignment.Center;
const penColor = new PdfColor(105, 105, 105);
const penWidth = 1;
const pen = new PdfPen(penColor, penWidth);
pen.dashStyle = PdfDashStyle.Dash;
const borderWidth = 1;
const borderColor = new PdfColor(192, 192, 192);
let pdfpen = new PdfPen(borderColor, borderWidth);
let pdfborders = new PdfBorders();
pdfborders.all = pdfpen;
let exportProperties = {
ganttStyle: {
fontFamily: 1,
columnHeader: {
backgroundColor: new PdfColor(179, 219, 255)
},
taskbar: {
taskColor: new PdfColor(240, 128, 128),
taskBorderColor: new PdfColor(240, 128, 128),
progressColor: new PdfColor(205, 92, 92),
},
connectorLineColor: new PdfColor(128, 0, 0),
footer: {
backgroundColor: new PdfColor(205, 92, 92)
},
timeline: {
backgroundColor: new PdfColor(179, 219, 255),
padding: new PdfPaddings(5, 2, 0, 0),
},
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),
},
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: pdfborders,
},
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: pdfborders,
},
}
};
var ganttChart = document.getElementById('GanttContainer').ej2_instances[0];
ganttChart.pdfExport(exportProperties);
}
}
};
},
provide: {
gantt: [Toolbar, PdfExport, DayMarkers]
}
};
</script>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.
<template>
<div>
<ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :gridLines="gridLines" :toolbar="toolbar" :toolbarClick="toolbarClick" :allowPdfExport='true' :pdfQueryTaskbarInfo="pdfQueryTaskbarInfo"
:height="height" :editSettings= "editSettings" :queryTaskbarInfo="queryTaskbarInfo">
<e-columns>
<e-column field='TaskID' headerText='Task ID'></e-column>
<e-column field='TaskName' headerText='Task Name'></e-column>
<e-column field='StartDate' headerText='Start Date'></e-column>
<e-column field='EndDate' headerText='End Date'></e-column>
</e-columns>
</ejs-gantt>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GanttComponent as EjsGantt, ColumnDirective as EColumn, ColumnsDirective as EColumns, Toolbar, PdfExport, Edit } from "@syncfusion/ej2-vue-gantt";
import { ganttData } from './data-source.js';
import { PdfColor } from '@syncfusion/ej2-pdf-export';
const gantt = ref(null);
const data = ganttData;
const height = '450px';
const taskFields = {
id: "TaskID",
name: "TaskName",
startDate: "StartDate",
endDate: "EndDate",
duration: "Duration",
progress: "Progress",
child: "subtasks",
segments: "Segments"
};
const editSettings = {
allowEditing: true,
allowDeleting: true,
allowTaskbarEditing: true,
showDeleteConfirmDialog: true
};
const gridLines = 'Both';
const toolbar = ['PdfExport'];
const toolbarClick = (args) => {
if (args.item.id === 'GanttContainer_pdfexport') {
var ganttChart = gantt.value.ej2Instances;
ganttChart.pdfExport();
}
};
const pdfQueryTaskbarInfo = (args) => {
if (args.taskbar.taskSegmentStyles) {
args.taskbar.taskSegmentStyles[1].taskColor = new PdfColor(255, 0, 0);
args.taskbar.taskSegmentStyles[1].progressColor = new PdfColor(0, 128, 0);
args.taskbar.taskSegmentStyles[1].taskBorderColor = new PdfColor(0, 0, 0);
}
};
const queryTaskbarInfo = (args) => {
if (args.data.taskData.Segments) {
var segmentIndex = args.taskbarElement.dataset.segmentIndex;
if (Number(segmentIndex) === 1) {
args.taskbarBgColor = 'red';
args.taskbarBorderColor = 'black';
args.progressBarBgColor = "green";
}
}
}
provide('gantt', [Toolbar, PdfExport, Edit]);
</script><template>
<div>
<ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :gridLines="gridLines" :toolbar="toolbar" :toolbarClick="toolbarClick" :allowPdfExport='true' :pdfQueryTaskbarInfo="pdfQueryTaskbarInfo"
:height="height" :editSettings= "editSettings" :queryTaskbarInfo="queryTaskbarInfo">
<e-columns>
<e-column field='TaskID' headerText='Task ID'></e-column>
<e-column field='TaskName' headerText='Task Name'></e-column>
<e-column field='StartDate' headerText='Start Date'></e-column>
<e-column field='EndDate' headerText='End Date'></e-column>
</e-columns>
</ejs-gantt>
</div>
</template>
<script>
import { GanttComponent, ColumnsDirective, ColumnDirective, Toolbar, PdfExport, Edit ,PdfQueryCellInfoEventArgs } from "@syncfusion/ej2-vue-gantt";
import { ganttData } from './data-source.js';
import { PdfColor } from '@syncfusion/ej2-pdf-export';
export default {
name: "App",
components: {
"ejs-gantt":GanttComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective,
},
data: function() {
return {
data: ganttData,
taskFields: {
id: "TaskID",
name: "TaskName",
startDate: "StartDate",
endDate: "EndDate",
duration: "Duration",
progress: "Progress",
child: "subtasks",
segments: "Segments"
},
height: '450px',
gridLines: 'Both',
editSettings: {
allowEditing: true,
allowDeleting: true,
allowTaskbarEditing: true,
showDeleteConfirmDialog: true
};
toolbar: ['PdfExport'],
toolbarClick: (args) => {
if (args.item.id === 'GanttContainer_pdfexport') {
var ganttChart = document.getElementById('GanttContainer').ej2_instances[0];
ganttChart.pdfExport();
}
},
pdfQueryTaskbarInfo: (args) => {
if (args.taskbar.taskSegmentStyles) {
args.taskbar.taskSegmentStyles[1].taskColor = new PdfColor(255, 0, 0);
args.taskbar.taskSegmentStyles[1].progressColor = new PdfColor(0, 128, 0);
args.taskbar.taskSegmentStyles[1].taskBorderColor = new PdfColor(0, 0, 0);
}
},
queryTaskbarInfo: (args) => {
if (args.data.taskData.Segments) {
var segmentIndex = args.taskbarElement.dataset.segmentIndex;
if (Number(segmentIndex) === 1) {
args.taskbarBgColor = 'red';
args.taskbarBorderColor = 'black';
args.progressBarBgColor = "green";
}
}
}
}
},
provide: {
gantt: [Toolbar, PdfExport, Edit]
}
};
</script>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.
<template>
<div>
<ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :toolbar="toolbar" :toolbarClick="toolbarClick" :allowPdfExport='true' :pdfQueryCellInfo="pdfQueryCellInfo" :height="height"
:rowHeight="rowHeight" :splitterSettings="splitterSettings" :allowResizing='true' :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' :template="'cTemplate'"></e-column>
<e-column field='EmailId' headerText='Email ID' width='150'></e-column>
</e-columns>
<template v-slot:cTemplate="{data}">
<div class="columnTemplate" v-if="data.ganttProperties.resourceNames">
<img
:src="'https://ej2.syncfusion.com/vue/demos/source/gantt/images/' + data.ganttProperties.resourceNames + '.png'"
height="40px" />
<div style="display:inline-block;width:100%;position:relative;left:30px">
</div>
</div>
</template>
</ejs-gantt>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GanttComponent as EjsGantt, ColumnDirective as EColumn, ColumnsDirective as EColumns, Toolbar, PdfExport, Selection ,PdfQueryCellInfoEventArgs } from "@syncfusion/ej2-vue-gantt";
import { editingData , editingResources } from './data-source.js';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
const gantt = ref(null);
const data = editingData;
const height = '450px';
const taskFields = {
id: 'TaskID',
name: 'TaskName',
resourceInfo: 'resources',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks',
};
const toolbar = ['PdfExport'];
const toolbarClick = (args) => {
if (args.item.id === 'GanttContainer_pdfexport') {
var exportProperties = {
fileName: "new.pdf"
};
var ganttChart = gantt.value.ej2Instances;
ganttChart.pdfExport(exportProperties);
}
};
const pdfQueryCellInfo = (args) => {
if (args.column.headerText === 'Resources') {
{
args.image = { height: 40, width: 40, base64: (args).data.taskData.resourcesImage };
}
}
if (args.column.headerText === 'Email ID') {
args.hyperLink = {
target: 'mailto:' + (args).data.taskData.EmailId,
displayText: (args).data.taskData.EmailId
};
}
};
const rowHeight = 50;
const splitterSettings = {
columnIndex: 3
};
const resourceFields = {
id: 'resourceId',
name: 'resourceName',
};
const resources = editingResources;
provide('gantt', [Toolbar, PdfExport]);
</script><template>
<div>
<ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :toolbar="toolbar" :toolbarClick="toolbarClick" :allowPdfExport='true' :pdfQueryCellInfo="pdfQueryCellInfo" :height="height"
:rowHeight="rowHeight" :splitterSettings="splitterSettings" :allowResizing='true' :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' :template="'cTemplate'"></e-column>
<e-column field='EmailId' headerText='Email ID' width='150'></e-column>
</e-columns>
<template v-slot:cTemplate="{data}">
<div class="columnTemplate" v-if="data.ganttProperties.resourceNames">
<img
:src="'https://ej2.syncfusion.com/vue/demos/source/gantt/images/' + data.ganttProperties.resourceNames + '.png'"
height="40px" />
<div style="display:inline-block;width:100%;position:relative;left:30px">
</div>
</div>
</template>
</ejs-gantt>
</div>
</template>
<script>
import { GanttComponent, ColumnsDirective, ColumnDirective, Toolbar, PdfExport, Selection ,PdfQueryCellInfoEventArgs } from "@syncfusion/ej2-vue-gantt";
import { editingData , editingResources } from './data-source.js';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
export default {
name: "App",
components: {
"ejs-gantt":GanttComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
data: function() {
return{
data: editingData,
taskFields: {
id: 'TaskID',
name: 'TaskName',
resourceInfo: 'resources',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks',
},
toolbar: ['PdfExport'],
toolbarClick: (args) => {
if (args.item.id === 'GanttContainer_pdfexport') {
var exportProperties = {
fileName:"new.pdf"
};
var ganttChart = document.getElementById('GanttContainer').ej2_instances[0];
ganttChart.pdfExport(exportProperties);
}
},
pdfQueryCellInfo: (args) => {
if (args.column.headerText === 'Resources') {
{
args.image = { height: 40, width: 40, base64: (args).data.taskData.resourcesImage };
}
}
if (args.column.headerText === 'Email ID') {
args.hyperLink = {
target: 'mailto:' + (args).data.taskData.EmailId,
displayText: (args).data.taskData.EmailId
};
}
},
rowHeight:50,
splitterSettings:{
columnIndex:3
},
height:'450px',
resourceFields: {
id: 'resourceId',
name: 'resourceName',
},
resources: editingResources
}
},
provide: {
gantt: [Toolbar, PdfExport]
}
};
</script>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.
<template>
<div>
<ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :toolbar="toolbar"
:toolbarClick="toolbarClick" :allowPdfExport='true' :pdfQueryTaskbarInfo="pdfQueryTaskbarInfo" :height="height"
:rowHeight="rowHeight" :taskbarHeight="taskbarHeight" :taskbarTemplate="'taskbarTemplate'"
:parentTaskbarTemplate="'parentTaskbarTemplate'" :milestoneTemplate="'milestoneTemplate'"
:splitterSettings="splitterSettings" :allowResizing='true' :resourceFields="resourceFields" :resources="resources">
<template v-slot:taskbarTemplate="{ data }">
<div class="e-gantt-child-taskbar-inner-div e-gantt-child-taskbar" style="height:100%;border-radius:5px;">
<div class="image">
<img
:src="'https://ej2.syncfusion.com/vue/demos/source/gantt/images/' + data.ganttProperties.resourceNames + '.png'"
height="40px" />
</div>
<span class="e-task-label"
style="position:absolute;top:5px;font-size:12px;text-overflow:ellipsis;height:90%;overflow:hidden;"></span>
</div>
</template>
<template v-slot:parentTaskbarTemplate="{ data }">
<div class="e-gantt-parent-taskbar-inner-div e-gantt-parent-taskbar" style="height:100%;border-radius:5px;">
<span class="e-task-label"
style="position:absolute;top:8px;left:30px;font-size:12px;text-overflow:ellipsis;height:90%;overflow:hidden;"></span>
</div>
</template>
<template v-slot:milestoneTemplate="{ data }">
<div class="e-gantt-milestone" style="position:relative;">
<div class="e-milestone-top"
style="border-right-width: 26px; margin-top: -9px; border-left-width: 26px; border-bottom-width: 26px;"></div>
<div class="e-milestone-bottom"
style="top: 26px; border-right-width: 26px; border-left-width: 26px; border-top-width: 26px;"></div>
<div class="image" style="position: absolute; top: 40%; left: 80%; transform: translate(-50%, -50%);">
<img
:src="'https://ej2.syncfusion.com/vue/demos/source/gantt/images/' + data.ganttProperties.resourceNames + '.png'"
height="30px" />
</div>
</div>
</template>
<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-columns>
</ejs-gantt>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GanttComponent as EjsGantt, ColumnDirective as EColumn, ColumnsDirective as EColumns, Toolbar, PdfExport, Selection, PdfQueryCellInfoEventArgs, pdfQueryTaskbarInfoEventArgs } from "@syncfusion/ej2-vue-gantt";
import { editingData, editingResources } from './data-source.js';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
const gantt = ref(null);
const data = editingData;
const height = '450px';
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
child: 'subtasks'
};
const toolbar = ['PdfExport'];
const toolbarClick = (args) => {
if (args.item.id === 'GanttContainer_pdfexport') {
var exportProperties = {
fileName: "new.pdf"
};
var ganttChart = gantt.value.ej2Instances;
ganttChart.pdfExport(exportProperties);
}
};
const pdfQueryTaskbarInfo = (args) => {
if (!args.data.hasChildRecords) {
if (args.data.ganttProperties.resourceNames) {
args.taskbarTemplate.image = [{
width: 20, base64: args.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.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.data.taskData.resourcesImage, height: 20,
}];
}
args.taskbarTemplate.value = args.data.TaskName
}
};
const rowHeight = 55;
const taskbarHeight = 20;
const splitterSettings = {
columnIndex: 3
};
const resourceFields = {
id: 'resourceId',
name: 'resourceName',
};
const resources = editingResources;
provide('gantt', [Toolbar, PdfExport]);
</script><template>
<div>
<ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :toolbar="toolbar" :toolbarClick="toolbarClick" :allowPdfExport='true' :pdfQueryTaskbarInfo="pdfQueryTaskbarInfo" :height="height"
:rowHeight="rowHeight" :taskbarHeight="taskbarHeight" :taskbarTemplate="'taskbarTemplate'" :parentTaskbarTemplate="'parentTaskbarTemplate'"
:milestoneTemplate="'milestoneTemplate'" :splitterSettings="splitterSettings" :allowResizing='true' :resourceFields="resourceFields"
:resources="resources">
<template v-slot:taskbarTemplate="{data}">
<div class="e-gantt-child-taskbar-inner-div e-gantt-child-taskbar" style="height:100%;border-radius:5px;">
<div class="image">
<img
:src="'https://ej2.syncfusion.com/vue/demos/source/gantt/images/' + data.ganttProperties.resourceNames + '.png'"
height="40px" />
</div>
<span class="e-task-label"
style="position:absolute;top:5px;font-size:12px;text-overflow:ellipsis;height:90%;overflow:hidden;"></span>
</div>
</template>
<template v-slot:parentTaskbarTemplate="{data}">
<div class="e-gantt-parent-taskbar-inner-div e-gantt-parent-taskbar" style="height:100%;border-radius:5px;">
<span class="e-task-label"
style="position:absolute;top:8px;left:30px;font-size:12px;text-overflow:ellipsis;height:90%;overflow:hidden;"></span>
</div>
</template>
<template v-slot:milestoneTemplate="{ data }">
<div class="e-gantt-milestone" style="position:relative;">
<div class="e-milestone-top"
style="border-right-width: 26px; margin-top: -9px; border-left-width: 26px; border-bottom-width: 26px;"></div>
<div class="e-milestone-bottom"
style="top: 26px; border-right-width: 26px; border-left-width: 26px; border-top-width: 26px;"></div>
<div class="image" style="position: absolute; top: 40%; left: 80%; transform: translate(-50%, -50%);">
<img :src="'https://ej2.syncfusion.com/vue/demos/source/gantt/images/' + data.ganttProperties.resourceNames + '.png'"
height="30px" />
</div>
</div>
</template>
<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-columns>
</ejs-gantt>
</div>
</template>
<script>
import { GanttComponent, ColumnsDirective, ColumnDirective, Toolbar, PdfExport, Selection ,PdfQueryCellInfoEventArgs,pdfQueryTaskbarInfoEventArgs } from "@syncfusion/ej2-vue-gantt";
import { editingData , editingResources } from './data-source.js';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
export default {
name: "App",
components: {
"ejs-gantt":GanttComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
data: function() {
return{
data: editingData,
taskFields: {
id: 'TaskID',
name: 'TaskName',
resourceInfo: 'resources',
startDate: 'StartDate',
duration: 'Duration',
child: 'subtasks',
},
toolbar: ['PdfExport'],
toolbarClick: (args) => {
if (args.item.id === 'GanttContainer_pdfexport') {
var exportProperties = {
fileName:"new.pdf"
};
var ganttChart = document.getElementById('GanttContainer').ej2_instances[0];
ganttChart.pdfExport(exportProperties);
}
},
pdfQueryTaskbarInfo: (args) => {
if (!args.data.hasChildRecords) {
if (args.data.ganttProperties.resourceNames) {
args.taskbarTemplate.image = [{
width: 20, base64: args.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.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.data.taskData.resourcesImage, height: 20,
}];
}
args.taskbarTemplate.value = args.data.TaskName
}
},
rowHeight:55,
splitterSettings:{
columnIndex:3
},
height:'450px',
resourceFields: {
id: 'resourceId',
name: 'resourceName',
},
resources: editingResources
}
},
provide: {
gantt: [Toolbar, PdfExport]
}
};
</script>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.
<template>
<div>
<ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :toolbar="toolbar" :toolbarClick="toolbarClick" :allowPdfExport='true' :pdfQueryTaskbarInfo="pdfQueryTaskbarInfo" :height="height"
:rowHeight="rowHeight" :taskbarHeight="taskbarHeight" :splitterSettings="splitterSettings" :allowResizing='true' :resourceFields="resourceFields"
:labelSettings="labelSettings" :projectStartDate="projectStartDate" :projectEndDate="projectEndDate" :resources="resources">
<template v-slot:leftLabelTemplate="{data}">
<div>
<template> [ % ]</template>
</div>
</template>
<template v-slot:rightLabelTemplate="{data}">
<div v-if="data.ganttProperties.resourceInfo">
<span v-for="resource in data.ganttProperties.resourceInfo">
<img :src="'https://ej2.syncfusion.com/vue/demos/src/gantt/images/' + resource.resourceName + '.png'"
style="height: 40px;"/>
<span style="margin-left:5px;margin-right:5px"></span>
</span>
</div>
</template>
<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-columns>
</ejs-gantt>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GanttComponent as EjsGantt, ColumnDirective as EColumn, ColumnsDirective as EColumns, Toolbar, PdfExport, Selection ,PdfQueryCellInfoEventArgs } from "@syncfusion/ej2-vue-gantt";
import { editingData , editingResources } from './data-source.js';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
const gantt = ref(null);
const data = editingData;
const height = '450px';
const taskFields = {
id: 'TaskID',
name: 'TaskName',
resourceInfo: 'resources',
startDate: 'StartDate',
duration: 'Duration',
child: 'subtasks',
};
const toolbar = ['PdfExport'];
const toolbarClick = (args) => {
if (args.item.id === 'GanttContainer_pdfexport') {
var exportProperties = {
fileName:"new.pdf"
};
var ganttChart = gantt.value.ej2Instances;
ganttChart.pdfExport(exportProperties);
}
};
const pdfQueryTaskbarInfo = (args) => {
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).data.taskData.resourcesImage, width: 20, height: 20
}]
}
args.labelSettings.taskLabel.value = args.data.ganttProperties.progress + '%'
};
const rowHeight = 55;
const splitterSettings = {
columnIndex:3
};
const resourceFields = {
id: 'resourceId',
name: 'resourceName',
};
const resources = editingResources;
const projectStartDate = new Date('03/24/2019');
const projectEndDate = new Date('04/30/2019');
const labelSettings = {
leftLabel: "leftLabelTemplate",
rightLabel: "rightLabelTemplate",
taskLabel: '${Progress}%'
};
provide('gantt', [Toolbar, PdfExport]);
</script><template>
<div>
<ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :toolbar="toolbar" :toolbarClick="toolbarClick" :allowPdfExport='true' :pdfQueryTaskbarInfo="pdfQueryTaskbarInfo" :height="height"
:rowHeight="rowHeight" :taskbarHeight="taskbarHeight" :splitterSettings="splitterSettings" :allowResizing='true' :resourceFields="resourceFields"
:labelSettings="labelSettings" :projectStartDate="projectStartDate" :projectEndDate="projectEndDate" :resources="resources">
<template v-slot:leftLabelTemplate="{data}">
<div>
<template> [ % ]</template>
</div>
</template>
<template v-slot:rightLabelTemplate="{data}">
<div v-if="data.ganttProperties.resourceInfo">
<span v-for="resource in data.ganttProperties.resourceInfo">
<img :src="'https://ej2.syncfusion.com/vue/demos/src/gantt/images/' + resource.resourceName + '.png'"
style="height: 40px;"/>
<span style="margin-left:5px;margin-right:5px"></span>
</span>
</div>
</template>
<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-columns>
</ejs-gantt>
</div>
</template>
<script>
import { GanttComponent, ColumnsDirective, ColumnDirective, Toolbar, PdfExport, Selection ,PdfQueryCellInfoEventArgs } from "@syncfusion/ej2-vue-gantt";
import { editingData , editingResources } from './data-source.js';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
export default {
name: "App",
components: {
"ejs-gantt":GanttComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective,
},
data: function() {
return{
data: editingData,
taskFields: {
id: 'TaskID',
name: 'TaskName',
resourceInfo: 'resources',
startDate: 'StartDate',
duration: 'Duration',
child: 'subtasks',
},
toolbar: ['PdfExport'],
labelSettings: {
leftLabel: "leftLabelTemplate",
rightLabel: "rightLabelTemplate",
taskLabel: '${Progress}%'
},
toolbarClick: (args) => {
if (args.item.id === 'GanttContainer_pdfexport') {
var exportProperties = {
fileName:"new.pdf"
};
var ganttChart = document.getElementById('GanttContainer').ej2_instances[0];
ganttChart.pdfExport(exportProperties);
}
},
pdfQueryTaskbarInfo: (args) => {
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).data.taskData.resourcesImage, width: 20, height: 20
}]
}
args.labelSettings.taskLabel.value = args.data.ganttProperties.progress + '%'
},
rowHeight:55,
splitterSettings:{
columnIndex:3
},
height:'450px',
resourceFields: {
id: 'resourceId',
name: 'resourceName',
},
resources: editingResources,
projectStartDate: new Date('03/24/2019'),
projectEndDate: new Date('04/30/2019'),
}
},
provide: {
gantt: [Toolbar, PdfExport]
}
};
</script>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.
<template>
<div>
<ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :toolbar="toolbar"
:toolbarClick="toolbarClick" :allowPdfExport='true' :pdfColumnHeaderQueryCellInfo="pdfColumnHeaderQueryCellInfo"
:height="height" :rowHeight="rowHeight" :taskbarHeight="taskbarHeight" :splitterSettings="splitterSettings"
:allowResizing='true' :resourceFields="resourceFields" :projectStartDate="projectStartDate"
:projectEndDate="projectEndDate" :resources="resources">
<template v-slot:nametemplate="{ data }">
<div>
<img src="../Task name.png" style="height: 20; width: 20;" class="e-image" /> Task Name
</div>
</template>
<template v-slot:datetemplate="{ data }">
<div>
<img src="../Start date.png" style="height: 20; width: 20;" class="e-image" /> Start Date
</div>
</template>
<e-columns>
<e-column field='TaskID' headerText='Task ID' textAlign='Left' width='100'
:headerTemplate="'nametemplate'"></e-column>
<e-column field='TaskName' headerText='Task Name' width='150' :headerTemplate="'datetemplate'"></e-column>
</e-columns>
</ejs-gantt>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GanttComponent as EjsGantt, ColumnDirective as EColumn, ColumnsDirective as EColumns, Toolbar, PdfExport, Selection, PdfQueryCellInfoEventArgs } from "@syncfusion/ej2-vue-gantt";
import { editingData, editingResources } from './data-source.js';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
const gantt = ref(null);
const data = editingData;
const height = '450px';
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
child: 'subtasks'
};
const toolbar = ['PdfExport'];
const toolbarClick = (args) => {
if (args.item.id === 'GanttContainer_pdfexport') {
var exportProperties = {
fileName: "new.pdf"
};
var ganttChart = gantt.value.ej2Instances;
ganttChart.pdfExport(exportProperties);
}
};
const pdfColumnHeaderQueryCellInfo = (args) => {
let base64Array = [
{ '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;
args.headerTemplate.fontStyle.fontSize = 6;
args.headerTemplate.fontStyle.fontColor = new PdfColor(255, 0, 0);
break;
}
i++;
}
};
const rowHeight = 55;
const taskbarHeight = 20;
const splitterSettings = {
columnIndex: 3
};
const resourceFields = {
id: 'resourceId',
name: 'resourceName',
};
const resources = editingResources;
const projectStartDate = new Date('03/24/2019');
const projectEndDate = new Date('04/30/2019');
provide('gantt', [Toolbar, PdfExport]);
</script><template>
<div>
<ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :toolbar="toolbar" :toolbarClick="toolbarClick" :allowPdfExport='true' :pdfColumnHeaderQueryCellInfo="pdfColumnHeaderQueryCellInfo" :height="height"
:rowHeight="rowHeight" :taskbarHeight="taskbarHeight" :splitterSettings="splitterSettings" :allowResizing='true' :resourceFields="resourceFields"
:projectStartDate="projectStartDate" :projectEndDate="projectEndDate" :resources="resources">
<template v-slot:nametemplate="{data}">
<div>
<img src="../Task name.png" style="height: 20; width: 20;" class="e-image"/> Task Name
</div>
</template>
<template v-slot:datetemplate="{data}">
<div>
<img src="../Start date.png" style="height: 20; width: 20;" class="e-image"/> Start Date
</div>
</template>
<e-columns>
<e-column field='TaskID' headerText='Task ID' textAlign='Left' width='100' :headerTemplate="'nametemplate'"></e-column>
<e-column field='TaskName' headerText='Task Name' width='150' :headerTemplate="'datetemplate'"></e-column>
</e-columns>
</ejs-gantt>
</div>
</template>
<script>
import { GanttComponent, ColumnsDirective, ColumnDirective, Toolbar, PdfExport, Selection ,PdfQueryCellInfoEventArgs } from "@syncfusion/ej2-vue-gantt";
import { editingData , editingResources } from './data-source.js';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
export default {
name: "App",
components: {
"ejs-gantt":GanttComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
data: function() {
let i =0;
return{
data: editingData,
taskFields: {
id: 'TaskID',
name: 'TaskName',
resourceInfo: 'resources',
startDate: 'StartDate',
duration: 'Duration',
child: 'subtasks',
},
toolbar: ['PdfExport'],
toolbarClick: (args) => {
if (args.item.id === 'GanttContainer_pdfexport') {
var exportProperties = {
fileName:"new.pdf"
};
var ganttChart = document.getElementById('GanttContainer').ej2_instances[0];
ganttChart.pdfExport(exportProperties);
}
},
pdfColumnHeaderQueryCellInfo: (args) => {
let base64Array = [
{ '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;
args.headerTemplate.fontStyle.fontSize = 6;
args.headerTemplate.fontStyle.fontColor = new PdfColor(255, 0, 0);
break;
}
i++;
}
},
rowHeight:55,
splitterSettings:{
columnIndex:3
},
height:'450px',
resourceFields: {
id: 'resourceId',
name: 'resourceName',
},
resources: editingResources,
projectStartDate: new Date('03/24/2019'),
projectEndDate: new Date('04/30/2019'),
}
},
provide: {
gantt: [Toolbar, PdfExport]
}
};
</script>