Pdf export in Vue Gantt component

16 Mar 20232 minutes to read

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 export data to PDF document, inject the PdfExport module in Gantt.

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

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