jQuery/JS Common - Utils - pdfExporter
exportDataGrid(options)
A Promise that is resolved when the grid data is prepared for export. It is a native Promise or a jQuery.Promise when you use jQuery.
This method requires the jsPDF v2.3.1+ library to export data and create PDF files.
If you use jQuery, declare the jsPDF CDN links within the <head>
tag of the HTML markup (see an example below). If you use Angular, Vue or React, install the library with the following command:
npm install jspdf
You can call this method at any point in your application. In this example, this method is called in a standalone button's onClick handler:
jQuery
$(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
<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
<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
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)
A Promise that is resolved after the Gantt data is exported. It is a native Promise or a jQuery.Promise when you use jQuery.
This method requires the jsPDF v2.3.1+ library to export data and the jsPDF-AutoTable plugin to create tables in exported files.
You can call the exportGantt method at any point in your application. In the example below, this method is called in a standalone toolbar item's onClick event handler:
jQuery
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
<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
<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
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
@(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
@(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:
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:
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'); });
If you have technical questions, please create a support ticket in the DevExpress Support Center.