Export

26 Mar 202524 minutes to read

Pdf export in Vue Gantt component

PDF export allows exporting Gantt data to PDF document. You need to use the pdfExport method for exporting. To enable PDF export in the Gantt, set the allowPdfExport to true.

To get a configured Gantt chart for exporting, you can follow the steps outlined in the video linked below:

To export data to PDF document, inject the PdfExport module in Gantt.

Note: Currently, we do not have support for exporting manually scheduled tasks.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<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 ganttChart = document.getElementById('GanttContainer').ej2_instances[0];
                    ganttChart.pdfExport();
                }
            },
      };
  },
  provide: {
      gantt: [Toolbar, PdfExport]
  }
};
</script>

Indicators in PDF exporting

The PDF export functionality allows users to export Gantt charts enriched with dynamic indicators and accompanying images.
These indicators, represented by images,can be effortlessly defined using the base64 encoding value in the data object of datasource.This data object field should be mapped to indiactor property of task fields.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<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',
        indicators: 'Indicators'
        },
        toolbar: ['PdfExport'],
        toolbarClick: (args) => {
               if (args.item.id === 'GanttContainer_pdfexport') {
                    var ganttChart = document.getElementById('GanttContainer').ej2_instances[0];
                    ganttChart.pdfExport();
                }
            },
      };
  },
  provide: {
      gantt: [Toolbar, PdfExport]
  }
};
</script>

Exporting Gantt data as a blob object

In Gantt, you can export the Gantt chart data as a blob object, which allows you to preview or modify the data before exporting it.

To export the Gantt chart data as a blob object, follow these steps:

step 1: pdfExport fourth argument set as true.

step 2: Then , pdfExpComplete return as blob object.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
     <div>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :allowExcelExport='true' :excelExportComplete='excelExpComplete' :pdfExportComplete='pdfExportComplete'  :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,ExcelExport } from "@syncfusion/ej2-vue-gantt";
import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
import { projectNewData  } from './data-source.js';
const gantt = ref(null);
const data = projectNewData;
const height = '450px';
const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    child: 'subtasks'
};
const toolbar = ['PdfExport','ExcelExport'];
const toolbarClick = (args) => {
        var ganttChart = gantt.value.ej2Instances;
            if (args.item.id === 'GanttContainer_pdfexport') {
                ganttChart.pdfExport(null,null,null,true);
            }
            if (args.item.id === 'GanttContainer_excelexport') {
                ganttChart.ganttObj.excelExport(excelExportProperties);
            }
        };
const excelExpComplete = (args) => {
  //This event will be triggered when excel exporting.
  args.promise.then((e) => {
    //In this `then` function, we can get blob data through the arguments after promise resolved.
    exportBlob(e.blobData);
  });
};
const pdfExportComplete = (args) => {
  //This event will be triggered when pdf exporting.
  args.promise.then((e) => {
    //In this `then` function, we can get blob data through the arguments after promise resolved.
    exportBlob(e.blobData);
  });
};
const exportBlob = (blob) => {
  let a = document.createElement('a');
  document.body.appendChild(a);
  a.style.display = 'none';
  let url = window.URL.createObjectURL(blob);
  a.href = url;
  a.download = 'Export';
  a.click();
  window.URL.revokeObjectURL(url);
  document.body.removeChild(a);
};
provide('gantt',  [Toolbar, PdfExport,Selection,ExcelExport]);
</script>
<template>
     <div>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :allowExcelExport='true' :excelExportComplete='excelExpComplete' :pdfExportComplete='pdfExportComplete'  :taskFields="taskFields" :toolbar="toolbar" :toolbarClick="toolbarClick" :allowPdfExport='true' :height="height"></ejs-gantt>
    </div>
</template>
<script>

import { GanttComponent, Toolbar, PdfExport, Selection,ExcelExport } from "@syncfusion/ej2-vue-gantt";
import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
import { projectNewData  } from './data-source.js';
export default {
name: "App",
components: {
"ejs-gantt":GanttComponent
},
  data: function() {
      return{
        data: projectNewData,
        height:'450px',
        taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks'
        },
        toolbar: ['PdfExport','ExcelExport'],
      
      };
  },
  methods: {
    toolbarClick: (args) => {
            var ganttChart = document.getElementById('GanttContainer').ej2_instances[0];
                if (args.item.id === 'GanttContainer_pdfexport') {
                    ganttChart.pdfExport(null,null,null,true);
                }
                if (args.item.id === 'GanttContainer_excelexport') {
                    ganttChart.ganttObj.excelExport(excelExportProperties);
                }
            },
        excelExpComplete: function (args) {
          //This event will be triggered when excel exporting.
          args.promise.then((e) => {
            //In this `then` function, we can get blob data through the arguments after promise resolved.
            this.exportBlob(e.blobData);
          });
        },
        pdfExportComplete: function (args) {
          //This event will be triggered when pdf exporting.
          args.promise.then((e) => {
            //In this `then` function, we can get blob data through the arguments after promise resolved.
            this.exportBlob(e.blobData);
          });
        },
        exportBlob: function (blob) {
          let a = document.createElement('a');
          document.body.appendChild(a);
          a.style.display = 'none';
          let url = window.URL.createObjectURL(blob);
          a.href = url;
          a.download = 'Export';
          a.click();
          window.URL.revokeObjectURL(url);
          document.body.removeChild(a);
        }
      },
  provide: {
      gantt: [Toolbar, PdfExport,Selection,ExcelExport]
  }
};
</script>

Single page exporting in gantt

In Gantt, we have provided support to export the Gantt component where each rows are auto-fit to the PDF document page width by setting isFitToWidth as true in fitToWidthSettings of PdfExportProperties.

Also, we can customize the chart width and grid width in exported file using chartWidth and gridWidth by defining it as percentage in string.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<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',
    endDate: 'EndDate',
    duration: 'Duration',
    progress: 'Progress',
    dependency: 'Predecessor',
    child: 'subtasks',
};
const toolbar = ['PdfExport'];
const toolbarClick = (args) => {
    if (args.item.id === 'GanttContainer_pdfexport') {
        var exportProperties = {
            fitToWidthSettings: {
                isFitToWidth: 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" :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',
                endDate: 'EndDate',
                duration: 'Duration',
                progress: 'Progress',
                dependency: 'Predecessor',
                child: 'subtasks',
        },
        toolbar: ['PdfExport'],
        toolbarClick: (args) => {
               if (args.item.id === 'GanttContainer_pdfexport') {
                   var exportProperties = {
                        fitToWidthSettings: {       
                        isFitToWidth: true,       
                       }        
                    };
                    var ganttChart = document.getElementById('GanttContainer').ej2_instances[0];
                    ganttChart.pdfExport(exportProperties);
                }
            },
      };
  },
  provide: {
      gantt: [Toolbar, PdfExport]
  }
};
</script>

Multiple gantt exporting in Vue Gantt component

PDF export provides an option for exporting multiple Gantt to same file. In this exported document, each Gantt will be exported to a new page of the document in same file.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
     <div>
     <p><b>First Gantt:</b></p>
        <ejs-gantt ref='gantt1' id="GanttContainer1" :dataSource="fData" :taskFields="taskFields" :toolbar="toolbar" :toolbarClick="toolbarClick" :allowPdfExport='true' :height="height1" :treeColumnIndex="1" :projectStartDate="projectStartDate" :projectEndDate="projectEndDate"></ejs-gantt>
    <p><b>Second Gantt:</b></p>
        <ejs-gantt ref='gantt2' id="GanttContainer2" :dataSource="sData" :taskFields="taskFields" :toolbar="toolbar" :toolbarClick="toolbarClick"  :allowPdfExport='true' :height="height2" :treeColumnIndex="1"></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 gantt1 = ref(null);
const gantt2 = ref(null);
const fData = [editingData[0]];
const sData = [editingData[1]];
const height1 = '280px';
const height2 = '250px';
const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    child: 'subtasks'
};
const toolbar = ['PdfExport'];
const projectStartDate = new Date('03/31/2019');
const projectEndDate = new Date('04/14/2019');
const toolbarClick = (args) => {
        if (args.item.id === 'GanttContainer1_pdfexport') {
            var firstGantt = gantt1.value.ej2Instances;
            var firstGanttExport =  firstGantt.pdfExport({},true);
            firstGanttExport.then((fData) => {
                var secondGantt = gantt2.value.ej2Instances;
                secondGantt.pdfExport({},false,fData);
            });
        }
    };
provide('gantt',  [Toolbar, PdfExport]);
</script>
<template>
     <div>
     <p><b>First Gantt:</b></p>
        <ejs-gantt ref='gantt1' id="GanttContainer1" :dataSource="fData" :taskFields="taskFields" :toolbar="toolbar" :toolbarClick="toolbarClick" :allowPdfExport='true' :height="height1" :treeColumnIndex="1" :projectStartDate="projectStartDate" :projectEndDate="projectEndDate"></ejs-gantt>
    <p><b>Second Gantt:</b></p>
        <ejs-gantt ref='gantt2' id="GanttContainer2" :dataSource="sData" :taskFields="taskFields" :toolbar="toolbar" :toolbarClick="toolbarClick"  :allowPdfExport='true' :height="height2" :treeColumnIndex="1"></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{
        fData: [editingData[0]],
        sData: [editingData[1]],
        height1:'280px',
        height2:'250px',
        taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks'
        },
        toolbar: ['PdfExport'],
        projectStartDate: new Date('03/31/2019'),
        projectEndDate: new Date('04/14/2019'),
        toolbarClick: (args) => {
                if (args.item.id === 'GanttContainer1_pdfexport') {
                    var firstGantt = document.getElementById('GanttContainer1').ej2_instances[0];
                    var firstGanttExport =  firstGantt.pdfExport({},true);
                    firstGanttExport.then((fData) => {
                        var secondGantt = document.getElementById('GanttContainer2').ej2_instances[0];
                        secondGantt.pdfExport({},false,fData);
                    });
                }
        },
        };
  },
  provide: {
    gantt: [Toolbar, PdfExport]
  }
};
</script>

Applying Themes in PDF Export

PDF export provides an option to include theme for the exported PDF document.
To apply theme in exported PDF, define the theme in pdfExportProperties.
The available themes are:

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<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 = {
           theme:"Fabric"
        };
        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 = {
                        theme: "Fabric"
                    };
                    var ganttChart = document.getElementById('GanttContainer').ej2_instances[0];
                    ganttChart.pdfExport(exportProperties);
                }
            },
        };
    },
    provide: {
        gantt: [Toolbar, PdfExport]
    }
};
</script>