Angular Common - Utils - pdfExporter
exportDataGrid(options) CTP
A Promise that is resolved when the grid data is prepared for export. It is a native Promise or a jQuery.Promise when you use jQuery.
This method requires the jsPDF library to export data and the jsPDF-AutoTable plugin to create tables in exported files.
You can call this method at any point in your application. In this example, we call this method in a standalone button's onClick handler:
- npm install jspdf jspdf-autotable
- <dx-button ...
- (onClick)="exportGrid($event)">
- </dx-button>
- <dx-data-grid ... >
- <!-- ... -->
- </dx-data-grid>
- import { Component } from '@angular/core';
- import { exportDataGrid as exportDataGridToPdf } from 'devextreme/pdf_exporter';
- import { jsPDF } from 'jspdf';
- import 'jspdf-autotable';
- @Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css']
- })
- export class AppComponent {
- @ViewChild(DxDataGridComponent, { static: false }) dataGrid: DxDataGridComponent;
- exportGrid() {
- const doc = new jsPDF();
- exportDataGridToPdf({
- jsPDFDocument: doc,
- component: this.dataGrid.instance
- }).then(() => {
- doc.save('Customers.pdf');
- })
- }
- }
- import { BrowserModule } from '@angular/platform-browser';
- import { NgModule } from '@angular/core';
- import { AppComponent } from './app.component';
- import { DxDataGridModule, DxButtonModule } from 'devextreme-angular';
- @NgModule({
- declarations: [
- AppComponent
- ],
- imports: [
- BrowserModule,
- DxDataGridModule,
- DxButtonModule
- ],
- providers: [ ],
- bootstrap: [AppComponent]
- })
- export class AppModule { }
exportGantt(options)
A Promise that is resolved after the Gantt data is exported. It is a native Promise or a jQuery.Promise when you use jQuery.
This method requires the jsPDF library to export data and the jsPDF-AutoTable plugin to create tables in exported files.
The exportGantt(options) method allows you to save information about the Gantt chart's layout, appearance, and tasks. This method supports the following options:
- createDocumentMethod - Specifies a function that creates a PDF document.
- format {string | width?: number, height?: number } - Specifies the document size.
- landscape {boolean} - Specifies whether to use horizontal orientation for the document.
- fileName {string} - Specifies the file name.
- exportMode {"all", "treeList", "chart"} - Specifies the part of the component to export (chart area, tree list area, or the entire component).
- dateRange {"all" | "visible" | startDate? : Date, endDate? : Date, startIndex? : number, endIndex? : number } - Restricts data output against a specified date range.
- margins { left?: number, top?: number, right?: number, bottom?: number } - Specifies the outer indents of the exported area.
The exporter supports standard PDF fonts. Refer to the Use of Unicode Characters / UTF-8 article to get information on how to use custom fonts for exporting.
You can call the exportGantt method at any point in your application. In the example below, this method is called in a standalone toolbar item's onClick event handler:
- <dx-gantt ...>
- <dxo-toolbar>
- <!-- ... -->
- <dxi-item
- widget="dxButton"
- [options]="exportButtonOptions">
- </dxi-item>
- </dxo-toolbar>
- </dx-gantt>
- import { Component } from '@angular/core';
- import { jsPDF } from 'jspdf';
- import 'jspdf-autotable';
- @Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css']
- })
- export class AppComponent {
- @ViewChild(DxGanttComponent, { static: false }) gantt: DxGanttComponent;
- exportButtonOptions: any;
- constructor() {
- this.exportButtonOptions = {
- hint: 'Export to PDF',
- icon: 'exportpdf',
- stylingMode: 'text',
- onClick: () => this.exportButtonClick()
- };
- }
- exportButtonClick() {
- const gantt = this.gantt.instance;
- exportGanttToPdf(
- {
- component: gantt,
- createDocumentMethod: (args?: any) => new jsPDF(args),
- format: 'a4',
- exportMode: 'all'',
- dateRange: 'visible''
- }
- ).then(doc => doc.save('gantt.pdf'));
- }
- // ...
- }
- import { BrowserModule } from '@angular/platform-browser';
- import { NgModule } from '@angular/core';
- import { AppComponent } from './app.component';
- import { DxGanttComponent, DxGanttModule } from 'devextreme-angular';
- import { exportGantt as exportGanttToPdf } from 'devextreme/pdf_exporter';
- @NgModule({
- imports: [
- BrowserModule,
- DxGanttModule
- ],
- declarations: [AppComponent],
- bootstrap: [AppComponent]
- })
- export class AppModule { }
The following code snippet illustrates how to process the PDF document when the export is complete:
- var gantt = $("#ganttContainer").dxGantt("instance");
- gantt.exportToPdf({
- format: "A4",
- landscape: true,
- exportMode: "chart",
- dateRange: "visible"
- }).then(function(doc) {
- doc.addPage();
- // your code
- doc.save('customDoc.pdf');
- });
To print the exported PDF document, call the autoPrint method:
- var gantt = $("#ganttContainer").dxGantt("instance");
- gantt.exportToPdf({
- format: "A4",
- landscape: true,
- exportMode: "chart",
- dateRange: "visible"
- }).then(function(doc) {
- doc.autoPrint();
- window.open(doc.output('your_url'), '_blank');
- });
If you have technical questions, please create a support ticket in the DevExpress Support Center.