<dx-button id="exportButton"
icon="exportpdf"
text="Export to PDF"
(onClick)="exportGrid($event)">
</dx-button>
<dx-data-grid
[dataSource]="customers"
[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/
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>