Export to PDF (CTP)
Our DataGrid allows you to easily and accurately export its contents to a PDF document. To enable PDF export operations, you must reference or import the following:
-
jsPDF
A library that creates and manages PDF documents. -
jsPDF-AutoTable
A plugin that creates and manages tables in PDF documents.
Once you have referenced/imported all required resources, call the exportDataGrid(options) method that belongs to the pdfExporter module to export DataGrid content to a PDF document.
In this demo, the exportDataGrid(options) method is called when you click the Export to PDF button. Review the export code in the button's onClick handler to learn more.
NOTE
This functionality is available as a community technology preview (CTP). Should you have any questions or suggestions prior to its official release, please email your comments to support@devexpress.com. You can also share your feedback on this feature's discussion page.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
<dx-button id="exportButton"
icon="exportpdf"
text="Export to PDF"
(onClick)="exportGrid($event)">
</dx-button>
<dx-data-grid
[dataSource]="customers"
keyExpr="ID"
[allowColumnReordering]="true"
[showBorders]="true">
<dxi-column dataField="CompanyName"></dxi-column>
<dxi-column dataField="Phone"></dxi-column>
<dxi-column dataField="Fax"></dxi-column>
<dxi-column dataField="City"></dxi-column>
<dxi-column dataField="State" [groupIndex]="0"></dxi-column>
<dxo-search-panel [visible]="true"></dxo-search-panel>
<dxo-paging [pageSize]="10"></dxo-paging>
<dxo-group-panel [visible]="true"></dxo-group-panel>
<dxo-grouping [autoExpandAll]="true"></dxo-grouping>
</dx-data-grid>
import { NgModule, Component, enableProdMode, ViewChild } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { DxDataGridModule, DxButtonModule, DxDataGridComponent } from 'devextreme-angular';
import { Service, Customer } from './app.service';
import { exportDataGrid as exportDataGridToPdf } from 'devextreme/pdf_exporter';
import { jsPDF } from 'jspdf';
import 'jspdf-autotable';
if(!/localhost/.test(document.location.host)) {
enableProdMode();
}
@Component({
selector: 'demo-app',
templateUrl: 'app/app.component.html',
styleUrls: ['app/app.component.css'],
providers: [Service]
})
export class AppComponent {
@ViewChild(DxDataGridComponent, { static: false }) dataGrid: DxDataGridComponent;
customers: Customer[];
constructor(service: Service) {
this.customers = service.getCustomers();
}
exportGrid() {
const doc = new jsPDF();
exportDataGridToPdf({
jsPDFDocument: doc,
component: this.dataGrid.instance
}).then(() => {
doc.save('Customers.pdf');
})
}
}
@NgModule({
imports: [
BrowserModule,
DxDataGridModule,
DxButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
#exportButton {
margin-bottom: 10px;
}
import { Injectable } from '@angular/core';
export class Customer {
ID: number;
CompanyName: string;
Address: string;
City: string;
State: string;
Zipcode: number;
Phone: string;
Fax: string;
Website: string;
}
let сustomers: Customer[] = [{
'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',
'Website': 'http://www.nowebsitesupermart.com'
}, {
'ID': 2,
'CompanyName': 'K&S Music',
'Address': '1000 Nicllet Mall',
'City': 'Minneapolis',
'State': 'Minnesota',
'Zipcode': 55403,
'Phone': '(612) 304-6073',
'Fax': '(612) 304-6074',
'Website': 'http://www.nowebsitemusic.com'
}, {
'ID': 3,
'CompanyName': 'Tom\'s Club',
'Address': '999 Lake Drive',
'City': 'Issaquah',
'State': 'Washington',
'Zipcode': 98027,
'Phone': '(800) 955-2292',
'Fax': '(800) 955-2293',
'Website': 'http://www.nowebsitetomsclub.com'
}, {
'ID': 4,
'CompanyName': 'E-Mart',
'Address': '3333 Beverly Rd',
'City': 'Hoffman Estates',
'State': 'Illinois',
'Zipcode': 60179,
'Phone': '(847) 286-2500',
'Fax': '(847) 286-2501',
'Website': 'http://www.nowebsiteemart.com'
}, {
'ID': 5,
'CompanyName': 'Walters',
'Address': '200 Wilmot Rd',
'City': 'Deerfield',
'State': 'Illinois',
'Zipcode': 60015,
'Phone': '(847) 940-2500',
'Fax': '(847) 940-2501',
'Website': 'http://www.nowebsitewalters.com'
}, {
'ID': 6,
'CompanyName': 'StereoShack',
'Address': '400 Commerce S',
'City': 'Fort Worth',
'State': 'Texas',
'Zipcode': 76102,
'Phone': '(817) 820-0741',
'Fax': '(817) 820-0742',
'Website': 'http://www.nowebsiteshack.com'
}, {
'ID': 7,
'CompanyName': 'Circuit Town',
'Address': '2200 Kensington Court',
'City': 'Oak Brook',
'State': 'Illinois',
'Zipcode': 60523,
'Phone': '(800) 955-2929',
'Fax': '(800) 955-9392',
'Website': 'http://www.nowebsitecircuittown.com'
}, {
'ID': 8,
'CompanyName': 'Premier Buy',
'Address': '7601 Penn Avenue South',
'City': 'Richfield',
'State': 'Minnesota',
'Zipcode': 55423,
'Phone': '(612) 291-1000',
'Fax': '(612) 291-2001',
'Website': 'http://www.nowebsitepremierbuy.com'
}, {
'ID': 9,
'CompanyName': 'ElectrixMax',
'Address': '263 Shuman Blvd',
'City': 'Naperville',
'State': 'Illinois',
'Zipcode': 60563,
'Phone': '(630) 438-7800',
'Fax': '(630) 438-7801',
'Website': 'http://www.nowebsiteelectrixmax.com'
}, {
'ID': 10,
'CompanyName': 'Video Emporium',
'Address': '1201 Elm Street',
'City': 'Dallas',
'State': 'Texas',
'Zipcode': 75270,
'Phone': '(214) 854-3000',
'Fax': '(214) 854-3001',
'Website': 'http://www.nowebsitevideoemporium.com'
}, {
'ID': 11,
'CompanyName': 'Screen Shop',
'Address': '1000 Lowes Blvd',
'City': 'Mooresville',
'State': 'North Carolina',
'Zipcode': 28117,
'Phone': '(800) 445-6937',
'Fax': '(800) 445-6938',
'Website': 'http://www.nowebsitescreenshop.com'
}, {
'ID': 12,
'CompanyName': 'Braeburn',
'Address': '1 Infinite Loop',
'City': 'Cupertino',
'State': 'California',
'Zipcode': 95014,
'Phone': '(408) 996-1010',
'Fax': '(408) 996-1012',
'Website': 'http://www.nowebsitebraeburn.com'
}, {
'ID': 13,
'CompanyName': 'PriceCo',
'Address': '30 Hunter Lane',
'City': 'Camp Hill',
'State': 'Pennsylvania',
'Zipcode': 17011,
'Phone': '(717) 761-2633',
'Fax': '(717) 761-2334',
'Website': 'http://www.nowebsitepriceco.com'
}, {
'ID': 14,
'CompanyName': 'Ultimate Gadget',
'Address': '1557 Watson Blvd',
'City': 'Warner Robbins',
'State': 'Georgia',
'Zipcode': 31093,
'Phone': '(995) 623-6785',
'Fax': '(995) 623-6786',
'Website': 'http://www.nowebsiteultimategadget.com'
}, {
'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',
'Website': 'http://www.nowebsitedepot.com'
}, {
'ID': 16,
'CompanyName': 'EZ Stop',
'Address': '618 Michillinda Ave.',
'City': 'Arcadia',
'State': 'California',
'Zipcode': 91007,
'Phone': '(626) 265-8632',
'Fax': '(626) 265-8633',
'Website': 'http://www.nowebsiteezstop.com'
}, {
'ID': 17,
'CompanyName': 'Clicker',
'Address': '1100 W. Artesia Blvd.',
'City': 'Compton',
'State': 'California',
'Zipcode': 90220,
'Phone': '(310) 884-9000',
'Fax': '(310) 884-9001',
'Website': 'http://www.nowebsiteclicker.com'
}, {
'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',
'Website': 'http://www.nowebsiteamerica.com'
}, {
'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',
'Website': 'http://www.nowebsitezonetoys.com'
}, {
'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',
'Website': 'http://www.nowebsiteacme.com'
}];
@Injectable()
export class Service {
getCustomers() {
return сustomers;
}
}
// In real applications, you should not transpile code in the browser. You can see how to create your own application with Angular and DevExtreme here:
// https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/
window.config = {
transpiler: 'ts',
typescriptOptions: {
module: "system",
emitDecoratorMetadata: true,
experimentalDecorators: true
},
meta: {
'typescript': {
"exports": "ts"
},
'devextreme/localization.js': {
"esModule": true
},
},
paths: {
'npm:': 'https://unpkg.com/'
},
map: {
'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',
'typescript': 'npm:typescript@3.5.3/lib/typescript.js',
'@angular': 'npm:@angular',
'tslib': 'npm:tslib@2.3.0/tslib.js',
'rxjs': 'npm:rxjs@6.4.0',
'fflate': 'npm:fflate@0.4.8/esm/browser.js',
'jspdf': 'npm:jspdf@2.3.1/dist/jspdf.es.min.js',
'jspdf-autotable': 'npm:jspdf-autotable@3.5.14/dist/jspdf.plugin.autotable.min.js',
'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.28.0/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@21.1.5/cjs',
'devextreme/bundles/dx.all': 'npm:devextreme@21.1.5/bundles/dx.all.js',
'jszip': 'npm:jszip@3.7.0/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.3.1/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.1.25',
'devexpress-gantt': 'npm:devexpress-gantt@3.0.4',
'devextreme-angular': 'npm:devextreme-angular@21.1.5',
'@devextreme/vdom': 'npm:@devextreme/vdom@1.2.2',
'inferno': 'npm:inferno@7.4.8/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat@7.4.8/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.8/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom@1.0.7/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate@7.4.8/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode@7.4.8/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class@7.4.8/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras@7.4.8/dist/inferno-extras.min.js'
},
packages: {
'app': {
main: './app.component.ts',
defaultExtension: 'ts'
},
'devextreme': {
defaultExtension: 'js'
},
'@devextreme/vdom': {
defaultExtension: 'js'
},
'devextreme/events/utils': {
main: 'index'
},
'devextreme/events': {
main: 'index'
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js'
}
},
packageConfigPaths: [
"npm:@devextreme/*/package.json",
"npm:@angular/*/package.json",
"npm:@angular/common/*/package.json",
"npm:rxjs/package.json",
"npm:rxjs/operators/package.json",
"npm:devextreme-angular/*/package.json",
"npm:devextreme-angular/ui/*/package.json",
"npm:devextreme-angular/package.json",
"npm:devexpress-diagram/package.json",
"npm:devexpress-gantt/package.json",
]
};
System.config(window.config);
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<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=1.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.5/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.5/css/dx.light.css" />
<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.10.3/dist/zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script>
<script src="config.js"></script>
<script>
System.import('app').catch(console.error.bind(console));
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<demo-app>Loading...</demo-app>
</div>
</body>
</html>