All docs
V24.2
24.2
24.1
23.2
23.1
22.2
22.1
21.2
21.1
20.2
20.1
The page you are viewing does not exist in version 20.1.
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.

jQuery/JS 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:

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

This method uses jsPDF v2.3.1+ to export data and create PDF files.

If you use jQuery, store links to the jsPDF library within the <head> tag. 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.

Warning: You need to perform extra steps to generate PDFs with non-ASCII characters. See the PDF Export guide for more information.

In the following example, the onClick handler of a standalone button fires this method:

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>

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

This method uses jsPDF v2.3.1+ to generate PDF files, and the jsPDF-AutoTable plugin to create tables within the PDF.

Warning: You need to perform extra steps to generate PDFs with non-ASCII characters. See the PDF Export guide. for more information.

In the following example, the onClick handler of a standalone toolbar item fires this method:

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');
  • });