Multiple gantt exporting in Vue Gantt component

18 Dec 20234 minutes to read

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.

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>
import Vue from "vue";
import { GanttPlugin, Toolbar, PdfExport, Selection } from "@syncfusion/ej2-vue-gantt";
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import {editingData  } from './data-source.js';
Vue.use(GanttPlugin);
export default {
  data: function() {
      return{
        fData: [ganttData[0]],
        sData: [ganttData[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>