React Common - Utils - pdfExporter

An object that serves as a namespace for the methods that export DevExtreme UI components to PDF.

exportDataGrid(options)

Exports grid data to a PDF file.

import { exportDataGrid } from "devextreme/common/export/pdf"
Parameters:
options:

PdfExportDataGridProps

Export settings.

Return Value:

Promise<void> (jQuery or native)

A Promise that resolves when grid data is ready for export. If you use jQuery, the return value is a jQuery.Promise. In other cases, it's a native JavaScript Promise.

View Demo

NOTE
  • This method uses jsPDF v2.3.1+ to generate PDF files.
  • To resolve possible issues with Unicode characters in exported PDF files, refer to the following troubleshooting guide: Export Unicode Characters - DataGrid.

In the following example, a DevExtreme Button's onClick event handler calls exportDataGrid:

jQuery
JavaScript
HTML
 $(function(){ $('#exportButton').dxButton({ // ... onClick: function() { const doc = new jsPDF(); DevExpress.pdfExporter.exportDataGrid({ jsPDFDocument: doc, component: dataGrid }).then(function() { doc.save('Customers.pdf'); }); } }); const dataGrid = $('#gridContainer').dxDataGrid({ // ... }).dxDataGrid('instance'); });
 <head> <!-- ... --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.0.0/jspdf.umd.min.js"></script> <!-- DevExtreme sources are referenced here --> </head>
Angular
app.component.html
app.component.ts
app.module.ts
 <dx-button ... (onClick)="exportGrid($event)"> </dx-button> <dx-data-grid ... > <!-- ... --> </dx-data-grid>
 import { Component } from '@angular/core'; import { exportDataGrid as exportDataGridToPdf } from 'devextreme/pdf_exporter'; import { jsPDF } from 'jspdf'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { @ViewChild(DxDataGridComponent, { static: false }) dataGrid: DxDataGridComponent; exportGrid() { const doc = new jsPDF(); exportDataGridToPdf({ jsPDFDocument: doc, component: this.dataGrid.instance }).then(() => { doc.save('Customers.pdf'); }) } }
 import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { DxDataGridModule, DxButtonModule } from 'devextreme-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DxDataGridModule, DxButtonModule ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { }
Vue
App.vue
 <template> <div> <DxButton ... @click="exportGrid()" /> <DxDataGrid ... :ref="dataGridRef"> <!-- ... --> </DxDataGrid> </div> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxDataGrid from 'devextreme-vue/data-grid'; import DxButton from 'devextreme-vue/button'; import { jsPDF } from 'jspdf'; import { exportDataGrid as exportDataGridToPdf } from 'devextreme/pdf_exporter'; const dataGridRef = 'dataGrid'; export default { components: { DxDataGrid, DxButton }, data() { return { dataGridRef }; }, computed: { dataGrid: function() { return this.$refs[dataGridRef].instance; } }, methods: { exportGrid() { const doc = new jsPDF(); exportDataGridToPdf({ jsPDFDocument: doc, component: this.dataGrid }).then(() => { doc.save('Customers.pdf'); }); } } } </script>
React
App.js
 import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import DataGrid from 'devextreme-react/data-grid'; import Button from 'devextreme-react/button'; import { jsPDF } from 'jspdf'; import { exportDataGrid as exportDataGridToPdf } from 'devextreme/pdf_exporter'; export default function App() { const dataGridRef = useRef(null); function exportGrid() { const doc = new jsPDF(); const dataGrid = dataGridRef.current.instance(); exportDataGridToPdf({ jsPDFDocument: doc, component: dataGrid }).then(() => { doc.save('Customers.pdf'); }); } return ( <React.Fragment> <div> <Button ... onClick={exportGrid} /> <DataGrid ... ref={dataGridRef} > {/* ... */} </DataGrid> </div> </React.Fragment> ); }

exportGantt(options)

Exports Gantt data to a PDF file.

import { exportGantt } from "devextreme/common/export/pdf"
Parameters:
options: GanttExport_Options

Export settings.

Return Value:

Promise<any> (jQuery or native)

A Promise that resolves when the Gantt data is ready for export. It is a native Promise or a jQuery.Promise when you use jQuery.

View Demo

NOTE
  • This method uses jsPDF v2.3.1+ to generate PDF files, and the jsPDF-AutoTable plugin to create tables within generated PDFs.
  • To resolve possible issues with Unicode characters in exported PDF files, refer to the following troubleshooting guide: Export Unicode Characters - Gantt.

In the following example, a toolbar button's onClick event handler calls exportGantt:

jQuery
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'); }); }
Angular
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 { }
Vue
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>
React
App.js
 import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import 'devexpress-gantt/dist/dx-gantt.css'; import Gantt, { Toolbar, Item, } from 'devextreme-react/gantt'; import { exportGantt as exportGanttToPdf } from 'devextreme/pdf_exporter'; import { jsPDF } from 'jspdf'; import 'jspdf-autotable'; const App = () => { const ganttRef = React.createRef(); const exportButtonOptions = { icon: 'exportpdf', hint: 'Export to PDF', stylingMode: 'text', onClick: 'exportButtonClick', }; const exportButtonClick = (e) => { const gantt = ganttRef.current.instance(); exportGanttToPdf( { component: gantt, createDocumentMethod: (args) => new jsPDF(args), format: 'a4', exportMode: 'all', dateRange: 'visible', }, ).then((doc) => doc.save('gantt.pdf')); } return ( <Gantt ... > <Toolbar> {/* ... */} <Item widget="dxButton" options={this.exportButtonOptions} /> </Toolbar> {/* ... */} </Gantt> ); }; export default App;
ASP.NET Core Controls
Razor C#
 @(Html.DevExtreme().Gantt() .Toolbar(t => { t.Items(i => { i.Add().Name("exportpdf") .Widget(widget => widget.Button() .OnClick("exportGantt") .Icon("exportpdf") .Hint("Export to PDF") .StylingMode(ButtonStylingMode.Text) ); }); }) // ... ) <script> function getGanttInstance() { return $("#gantt").dxGantt("instance"); } function exportGantt() { var ganttInstance = getGanttInstance(); ganttInstance.exportToPdf( { format: 'a4', exportMode: 'all', dateRange: 'visible'' } ).then(doc => { doc.save('gantt.pdf'); }); } </script>
ASP.NET MVC Controls
Razor C#
 @(Html.DevExtreme().Gantt() .Toolbar(t => { t.Items(i => { i.Add().Name("exportpdf") .Widget(widget => widget.Button() .OnClick("exportGantt") .Icon("exportpdf") .Hint("Export to PDF") .StylingMode(ButtonStylingMode.Text) ); }); }) // ... ) <script> function getGanttInstance() { return $("#gantt").dxGantt("instance"); } function exportGantt() { var ganttInstance = getGanttInstance(); ganttInstance.exportToPdf( { format: 'a4', exportMode: 'all', dateRange: 'visible'' } ).then(doc => { doc.save('gantt.pdf'); }); } </script>

The following code snippet illustrates how to process the PDF document when the export is complete:

JavaScript
 var gantt = $("#ganttContainer").dxGantt("instance"); gantt.exportToPdf({ format: "A4", landscape: true, exportMode: "chart", dateRange: "visible" }).then(function(doc) { doc.addPage(); // your code doc.save('customDoc.pdf'); });

To print the exported PDF document, call the autoPrint method:

JavaScript
 var gantt = $("#ganttContainer").dxGantt("instance"); gantt.exportToPdf({ format: "A4", landscape: true, exportMode: "chart", dateRange: "visible" }).then(function(doc) { doc.autoPrint(); window.open(doc.output('your_url'), '_blank'); });