JavaScript/jQuery Gantt - Export Data

The Gantt component allows you to export its data in PDF format. This feature requires the jsPDF library to export data and the jsPDF-AutoTable plugin to create tables in exported files.

To configure export operations, use the exportGantt(options) method from the pdfExporter module.

You can call this method at any point in your application. In this example, this method is called in a standalone toolbar item's onClick event handler:

App.vue
  • <template>
  • <DxGantt ... >
  • <DxToolbar>
  • <!-- ... -->
  • <DxItem
  • :options="exportButtonOptions"
  • widget="dxButton"
  • />
  • </DxToolbar>
  • <!-- ... -->
  • </DxGantt>
  • </template>
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  • import 'devexpress-gantt/dist/dx-gantt.css';
  •  
  • import {
  • DxGantt,
  • DxToolbar,
  • DxItem
  • // ...
  • } from 'devextreme-vue/gantt';
  •  
  • import { jsPDF } from 'jspdf';
  • import 'jspdf-autotable';
  • import { exportGantt as exportGanttToPdf } from 'devextreme/pdf_exporter';
  •  
  • const ganttRef = 'gantt';
  •  
  • export default {
  • components: {
  • DxGantt,
  • DxToolbar,
  • DxItem
  • // ...
  • },
  • data() {
  • return {
  • exportButtonOptions: {
  • hint: 'Export to PDF',
  • icon: 'exportpdf',
  • stylingMode: 'text',
  • onClick: () => {
  • this.exportGantt();
  • },
  • },
  • };
  • },
  • computed: {
  • gantt() {
  • return this.$refs[ganttRef].instance;
  • },
  • },
  • methods: {
  • exportGantt() {
  • exportGanttToPdf({
  • component: this.gantt,
  • createDocumentMethod: (args) => new jsPDF(args),
  • format: 'a4',
  • exportMode: 'all',
  • dateRange: 'visible',
  • }).then((doc) => doc.save('gantt.pdf'));
  • },
  • },
  • };
  • </script>

View Demo