React 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:

JavaScript
  • const ganttInstance = $('#gantt').dxGantt({
  • toolbar: {
  • items: [
  • // ...
  • {
  • widget: 'dxButton',
  • options: {
  • icon: 'exportpdf',
  • hint: 'Export to PDF',
  • stylingMode: 'text',
  • onClick() {
  • exportGantt();
  • },
  • },
  • },
  • ],
  • },
  • }).dxGantt('instance');
  •  
  • function exportGantt() {
  • DevExpress.pdfExporter.exportGantt({
  • component: ganttInstance,
  • createDocumentMethod: (args) => new jsPDF(args),
  • format: 'a4',
  • exportMode: 'all',
  • dateRange: 'visible'
  • },
  • ).then((doc) => {
  • doc.save('gantt.pdf');
  • });
  • }

View Demo