Export to PDF (CTP)

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/ System.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.1.0/tslib.js', 'rxjs': 'npm:rxjs@6.4.0', 'jspdf': 'npm:jspdf@2.0.0/dist/jspdf.es.min.js', 'jspdf-autotable': 'npm:jspdf-autotable@3.5.9/dist/jspdf.plugin.autotable.min.js', 'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.25.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@20.2.5', 'jszip': 'npm:jszip@3.5.0/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@0.9.8/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.0.11', 'devexpress-gantt': 'npm:devexpress-gantt@2.0.18', 'devextreme-angular': 'npm:devextreme-angular@20.2.5', 'preact': 'npm:preact@10.5.11/dist/preact.js', 'preact/hooks': 'npm:preact@10.5.11/hooks/dist/hooks.js' }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts' }, 'devextreme': { defaultExtension: 'js' }, 'devextreme/events/utils': { main: 'index' }, 'devextreme/events': { main: 'index' }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js' } }, packageConfigPaths: [ "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", ] });

<!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/20.2.5/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.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.2/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>