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: companies,
keyExpr: 'ID',
width: '100%',
showBorders: true,
groupPanel: {
visible: true,
},
grouping: {
autoExpandAll: true,
},
sortByGroupSummaryInfo: [{
summaryItem: 'count',
}],
export: {
enabled: true,
formats: ['pdf'],
},
onExporting(e) {
// eslint-disable-next-line new-cap
const doc = new jsPDF();
DevExpress.pdfExporter.exportDataGrid({
jsPDFDocument: doc,
component: e.component,
columnWidths: [40, 40, 30, 30, 40],
customizeCell({ gridCell, pdfCell }) {
if (gridCell.rowType === 'data' && gridCell.column.dataField === 'Phone') {
pdfCell.text = pdfCell.text.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
} else if (gridCell.rowType === 'group') {
pdfCell.backgroundColor = '#BEDFE6';
} else if (gridCell.rowType === 'totalFooter') {
pdfCell.font.style = 'italic';
}
},
customDrawCell(options) {
const { gridCell, pdfCell } = options;
if (gridCell.rowType === 'data' && gridCell.column.dataField === 'Website') {
options.cancel = true;
doc.setFontSize(11);
doc.setTextColor('#0000FF');
const textHeight = doc.getTextDimensions(pdfCell.text).h;
doc.textWithLink('website',
options.rect.x + pdfCell.padding.left,
options.rect.y + options.rect.h / 2 + textHeight / 2, { url: pdfCell.text });
}
},
}).then(() => {
doc.save('Companies.pdf');
});
},
columns: [{
dataField: 'Name',
width: 190,
}, {
dataField: 'Address',
width: 200,
},
'City',
{
dataField: 'State',
groupIndex: 0,
}, {
dataField: 'Phone',
format(value) {
const USNumber = value.match(/(\d{3})(\d{3})(\d{4})/);
return `(${USNumber[1]}) ${USNumber[2]}-${USNumber[3]}`;
},
}, {
dataField: 'Website',
alignment: 'center',
width: 100,
cellTemplate(container, options) {
return $('<a>', { href: options.value, target: '_blank' }).text('Website');
},
}],
summary: {
totalItems: [{
column: 'Name',
summaryType: 'count',
displayFormat: 'Total count: {0}',
}],
},
});
});
<!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>
#gridContainer {
height: 436px;
}
const companies = [{
ID: 1,
Name: 'Super Mart of the West',
Address: '702 SW 8th Street',
City: 'Bentonville',
State: 'Arkansas',
Zipcode: 72716,
Phone: '8005552797',
Fax: '(800) 555-2171',
Website: 'http://nowebsitesupermart.dx',
}, {
ID: 2,
Name: 'Electronics Depot',
Address: '2455 Paces Ferry Road NW',
City: 'Atlanta',
State: 'Georgia',
Zipcode: 30339,
Phone: '8005953232',
Fax: '(800) 595-3231',
Website: 'http://nowebsitedepot.dx',
}, {
ID: 3,
Name: 'K&S Music',
Address: '1000 Nicllet Mall',
City: 'Minneapolis',
State: 'Minnesota',
Zipcode: 55403,
Phone: '6123046073',
Fax: '(612) 304-6074',
Website: 'http://nowebsitemusic.dx',
}, {
ID: 4,
Name: "Tom's Club",
Address: '999 Lake Drive',
City: 'Issaquah',
State: 'Washington',
Zipcode: 98027,
Phone: '8009552292',
Fax: '(800) 955-2293',
Website: 'http://nowebsitetomsclub.dx',
}, {
ID: 5,
Name: 'E-Mart',
Address: '3333 Beverly Rd',
City: 'Hoffman Estates',
State: 'Illinois',
Zipcode: 60179,
Phone: '8472862500',
Fax: '(847) 286-2501',
Website: 'http://nowebsiteemart.dx',
}, {
ID: 6,
Name: 'Walters',
Address: '200 Wilmot Rd',
City: 'Deerfield',
State: 'Illinois',
Zipcode: 60015,
Phone: '8479402500',
Fax: '(847) 940-2501',
Website: 'http://nowebsitewalters.dx',
}, {
ID: 7,
Name: 'StereoShack',
Address: '400 Commerce S',
City: 'Fort Worth',
State: 'Texas',
Zipcode: 76102,
Phone: '8178200741',
Fax: '(817) 820-0742',
Website: 'http://nowebsiteshack.dx',
}, {
ID: 8,
Name: 'Circuit Town',
Address: '2200 Kensington Court',
City: 'Oak Brook',
State: 'Illinois',
Zipcode: 60523,
Phone: '8009552929',
Fax: '(800) 955-9392',
Website: 'http://nowebsitecircuittown.dx',
}, {
ID: 9,
Name: 'Premier Buy',
Address: '7601 Penn Avenue South',
City: 'Richfield',
State: 'Minnesota',
Zipcode: 55423,
Phone: '6122911000',
Fax: '(612) 291-2001',
Website: 'http://nowebsitepremierbuy.dx',
}, {
ID: 10,
Name: 'ElectrixMax',
Address: '263 Shuman Blvd',
City: 'Naperville',
State: 'Illinois',
Zipcode: 60563,
Phone: '6304387800',
Fax: '(630) 438-7801',
Website: 'http://nowebsiteelectrixmax.dx',
}, {
ID: 11,
Name: 'Video Emporium',
Address: '1201 Elm Street',
City: 'Dallas',
State: 'Texas',
Zipcode: 75270,
Phone: '2148543000',
Fax: '(214) 854-3001',
Website: 'http://nowebsitevideoemporium.dx',
}, {
ID: 12,
Name: 'Screen Shop',
Address: '1000 Lowes Blvd',
City: 'Mooresville',
State: 'North Carolina',
Zipcode: 28117,
Phone: '8004456937',
Fax: '(800) 445-6938',
Website: 'http://nowebsitescreenshop.dx',
}];
In this demo, the customizeCell function changes the following elements:
- Background color and font weight of group row cells
- Font style of a footer cell
The customDrawCell function allows you to draw cells in a PDF document. The following parameters are available when you use this function:
- doc
An instance of the jsPDFDocument object. - rect
A cell’s bounds. - gridCell
Contains information about the source JavaScript DataGrid cell. - pdfCell
Contains settings applied to a cell in a PDF document. - cancel
Set this parameter to true to prevent default painting logic.
This demo uses the customDrawCell function to paint cells in the "Website" column.