Vue 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.component.html
app.component.ts
app.module.ts
  • <dx-gantt ...>
  • <dxo-toolbar>
  • <!-- ... -->
  • <dxi-item
  • widget="dxButton"
  • [options]="exportButtonOptions">
  • </dxi-item>
  • </dxo-toolbar>
  • </dx-gantt>
  • import { Component } from '@angular/core';
  • import { jsPDF } from 'jspdf';
  • import 'jspdf-autotable';
  •  
  • @Component({
  • selector: 'app-root',
  • templateUrl: './app.component.html',
  • styleUrls: ['./app.component.css']
  • })
  •  
  • export class AppComponent {
  • @ViewChild(DxGanttComponent, { static: false }) gantt: DxGanttComponent;
  • exportButtonOptions: any;
  •  
  • constructor() {
  • this.exportButtonOptions = {
  • hint: 'Export to PDF',
  • icon: 'exportpdf',
  • stylingMode: 'text',
  • onClick: () => this.exportButtonClick()
  • };
  • }
  •  
  • exportButtonClick() {
  • const gantt = this.gantt.instance;
  •  
  • exportGanttToPdf(
  • {
  • component: gantt,
  • createDocumentMethod: (args?: any) => new jsPDF(args),
  • format: 'a4',
  • exportMode: 'all'',
  • dateRange: 'visible''
  • }
  • ).then(doc => doc.save('gantt.pdf'));
  • }
  • // ...
  • }
  • import { BrowserModule } from '@angular/platform-browser';
  • import { NgModule } from '@angular/core';
  • import { AppComponent } from './app.component';
  • import { DxGanttComponent, DxGanttModule } from 'devextreme-angular';
  • import { exportGantt as exportGanttToPdf } from 'devextreme/pdf_exporter';
  •  
  • @NgModule({
  • imports: [
  • BrowserModule,
  • DxGanttModule
  • ],
  • declarations: [AppComponent],
  • bootstrap: [AppComponent]
  • })
  • export class AppModule { }

View Demo