Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
// This code is used for backwards compatibility with the older jsPDF variable name
// Read more: https://github.com/MrRio/jsPDF/releases/tag/v2.0.0
window.jsPDF = window.jspdf.jsPDF;
$(() => {
$('#gridContainer').dxDataGrid({
dataSource: customers,
keyExpr: 'ID',
allowColumnReordering: true,
showBorders: true,
grouping: {
autoExpandAll: true,
},
selection: {
mode: 'multiple',
},
paging: {
pageSize: 10,
},
columns: [
'CompanyName',
'Phone',
'Fax',
'City',
{
dataField: 'State',
groupIndex: 0,
},
],
export: {
enabled: true,
formats: ['pdf'],
allowExportSelectedData: true,
},
onExporting(e) {
// eslint-disable-next-line new-cap
const doc = new jsPDF();
DevExpress.pdfExporter.exportDataGrid({
jsPDFDocument: doc,
component: e.component,
indent: 5,
}).then(() => {
doc.save('Companies.pdf');
});
},
});
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.6/css/dx.light.css" />
<script src="js/dx.all.js"></script>
<script src="data.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="gridContainer"></div>
</div>
</body>
</html>
const customers = [{
ID: 1,
CompanyName: 'Super Mart of the West',
Address: '702 SW 8th Street',
City: 'Bentonville',
State: 'Arkansas',
Zipcode: 72716,
Phone: '(800) 555-2797',
Fax: '(800) 555-2171',
}, {
ID: 2,
CompanyName: 'K&S Music',
Address: '1000 Nicllet Mall',
City: 'Minneapolis',
State: 'Minnesota',
Zipcode: 55403,
Phone: '(612) 304-6073',
Fax: '(612) 304-6074',
}, {
ID: 3,
CompanyName: 'Tom\'s Club',
Address: '999 Lake Drive',
City: 'Issaquah',
State: 'Washington',
Zipcode: 98027,
Phone: '(800) 955-2292',
Fax: '(800) 955-2293',
}, {
ID: 4,
CompanyName: 'E-Mart',
Address: '3333 Beverly Rd',
City: 'Hoffman Estates',
State: 'Illinois',
Zipcode: 60179,
Phone: '(847) 286-2500',
Fax: '(847) 286-2501',
}, {
ID: 5,
CompanyName: 'Walters',
Address: '200 Wilmot Rd',
City: 'Deerfield',
State: 'Illinois',
Zipcode: 60015,
Phone: '(847) 940-2500',
Fax: '(847) 940-2501',
}, {
ID: 6,
CompanyName: 'StereoShack',
Address: '400 Commerce S',
City: 'Fort Worth',
State: 'Texas',
Zipcode: 76102,
Phone: '(817) 820-0741',
Fax: '(817) 820-0742',
}, {
ID: 7,
CompanyName: 'Circuit Town',
Address: '2200 Kensington Court',
City: 'Oak Brook',
State: 'Illinois',
Zipcode: 60523,
Phone: '(800) 955-2929',
Fax: '(800) 955-9392',
}, {
ID: 8,
CompanyName: 'Premier Buy',
Address: '7601 Penn Avenue South',
City: 'Richfield',
State: 'Minnesota',
Zipcode: 55423,
Phone: '(612) 291-1000',
Fax: '(612) 291-2001',
}, {
ID: 9,
CompanyName: 'ElectrixMax',
Address: '263 Shuman Blvd',
City: 'Naperville',
State: 'Illinois',
Zipcode: 60563,
Phone: '(630) 438-7800',
Fax: '(630) 438-7801',
}, {
ID: 10,
CompanyName: 'Video Emporium',
Address: '1201 Elm Street',
City: 'Dallas',
State: 'Texas',
Zipcode: 75270,
Phone: '(214) 854-3000',
Fax: '(214) 854-3001',
}, {
ID: 11,
CompanyName: 'Screen Shop',
Address: '1000 Lowes Blvd',
City: 'Mooresville',
State: 'North Carolina',
Zipcode: 28117,
Phone: '(800) 445-6937',
Fax: '(800) 445-6938',
}, {
ID: 12,
CompanyName: 'Braeburn',
Address: '1 Infinite Loop',
City: 'Cupertino',
State: 'California',
Zipcode: 95014,
Phone: '(408) 996-1010',
Fax: '(408) 996-1012',
}, {
ID: 13,
CompanyName: 'PriceCo',
Address: '30 Hunter Lane',
City: 'Camp Hill',
State: 'Pennsylvania',
Zipcode: 17011,
Phone: '(717) 761-2633',
Fax: '(717) 761-2334',
}, {
ID: 14,
CompanyName: 'Ultimate Gadget',
Address: '1557 Watson Blvd',
City: 'Warner Robbins',
State: 'Georgia',
Zipcode: 31093,
Phone: '(995) 623-6785',
Fax: '(995) 623-6786',
}, {
ID: 15,
CompanyName: 'Electronics Depot',
Address: '2455 Paces Ferry Road NW',
City: 'Atlanta',
State: 'Georgia',
Zipcode: 30339,
Phone: '(800) 595-3232',
Fax: '(800) 595-3231',
}, {
ID: 16,
CompanyName: 'EZ Stop',
Address: '618 Michillinda Ave.',
City: 'Arcadia',
State: 'California',
Zipcode: 91007,
Phone: '(626) 265-8632',
Fax: '(626) 265-8633',
}, {
ID: 17,
CompanyName: 'Clicker',
Address: '1100 W. Artesia Blvd.',
City: 'Compton',
State: 'California',
Zipcode: 90220,
Phone: '(310) 884-9000',
Fax: '(310) 884-9001',
}, {
ID: 18,
CompanyName: 'Store of America',
Address: '2401 Utah Ave. South',
City: 'Seattle',
State: 'Washington',
Zipcode: 98134,
Phone: '(206) 447-1575',
Fax: '(206) 447-1576',
}, {
ID: 19,
CompanyName: 'Zone Toys',
Address: '1945 S Cienega Boulevard',
City: 'Los Angeles',
State: 'California',
Zipcode: 90034,
Phone: '(310) 237-5642',
Fax: '(310) 237-5643',
}, {
ID: 20,
CompanyName: 'ACME',
Address: '2525 E El Segundo Blvd',
City: 'El Segundo',
State: 'California',
Zipcode: 90245,
Phone: '(310) 536-0611',
Fax: '(310) 536-0612',
}];
NOTE
Need to create printable documents simply? Try our .NET-based DevExpress Reports: they ship with an intuitive Visual Studio Report Designer, Web Report Designer for end-user ad-hoc reporting, and a rich set of report controls, including cross tabs and charts.
You can generate a variety of report types — from simple mail-merge, table, and vertical reports to master-detail (hierarchical) and cross-tab reports, print or export them to PDF, Excel, and other formats.
Develop using VS Code? Leverage the capabilities of a brand new VS Code Report Designer extension to create and edit reports/documents on any platform, be it Windows, macOS, or Linux.