All docs
V20.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.
A newer version of this page is available. Switch to the current version.

jQuery/JS Common - Utils - pdfExporter

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

exportDataGrid(options) CTP

Exports grid data to a PDF file.

Module: pdf_exporter
Parameters:

Export settings.

Return Value:

Promise<void> (jQuery or native)

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.

NOTE
This functionality is available as a community technology preview (CTP). Should you have any questions or suggestions prior to its official release, please create a new ticket in the DevExpress Support Center.

This method requires the jsPDF library to export data and the jsPDF-AutoTable plugin to create tables in exported files.

You can call this method at any point in your application. In this example, we call this method in a standalone button's onClick handler:

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>
  • <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.9/jspdf.plugin.autotable.min.js"></script>
  • <!-- DevExtreme sources are referenced here -->
  • </head>

View Demo