jQuery Common - Utils - pdfExporter
exportDataGrid(options)
import { exportDataGrid } from "devextreme/pdf_exporter"
Parameters:
options:
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 v2.3.1+ library to export data and create PDF files.
If you use jQuery, declare the jsPDF CDN links within the <head> tag of the HTML markup (see an example below). If you use Angular, Vue or React, install the library with the following command:
npm install jspdf
You can call this method at any point in your application. In this example, this method is called in a standalone button's onClick handler:
jQuery
JavaScript
HTML
$(function(){
$('#exportButton').dxButton({
// ...
onClick: function() {
const doc = new jsPDF();
DevExpress.pdfExporter.exportDataGrid({
jsPDFDocument: doc,
component: dataGrid
}).then(function() {
doc.save('Customers.pdf');
});
}
});
const dataGrid = $('#gridContainer').dxDataGrid({
// ...
}).dxDataGrid('instance');
});
<head>
<!-- ... -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.0.0/jspdf.umd.min.js"></script>
<!-- DevExtreme sources are referenced here -->
</head>Angular
app.component.html
app.component.ts
app.module.ts
<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';
@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 { }Vue
App.vue
<template>
<div>
<DxButton ...
@click="exportGrid()"
/>
<DxDataGrid ...
:ref="dataGridRef">
<!-- ... -->
</DxDataGrid>
</div>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import DxDataGrid from 'devextreme-vue/data-grid';
import DxButton from 'devextreme-vue/button';
import { jsPDF } from 'jspdf';
import { exportDataGrid as exportDataGridToPdf } from 'devextreme/pdf_exporter';
const dataGridRef = 'dataGrid';
export default {
components: {
DxDataGrid,
DxButton
},
data() {
return {
dataGridRef
};
},
computed: {
dataGrid: function() {
return this.$refs[dataGridRef].instance;
}
},
methods: {
exportGrid() {
const doc = new jsPDF();
exportDataGridToPdf({
jsPDFDocument: doc,
component: this.dataGrid
}).then(() => {
doc.save('Customers.pdf');
});
}
}
}
</script>React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import DataGrid from 'devextreme-react/data-grid';
import Button from 'devextreme-react/button';
import { jsPDF } from 'jspdf';
import { exportDataGrid as exportDataGridToPdf } from 'devextreme/pdf_exporter';
export default function App() {
const dataGridRef = useRef(null);
function exportGrid() {
const doc = new jsPDF();
const dataGrid = dataGridRef.current.instance;
exportDataGridToPdf({
jsPDFDocument: doc,
component: dataGrid
}).then(() => {
doc.save('Customers.pdf');
});
}
return (
<React.Fragment>
<div>
<Button ...
onClick={exportGrid}
/>
<DataGrid ...
ref={dataGridRef}
>
{/* ... */}
</DataGrid>
</div>
</React.Fragment>
);
}exportGantt(options)
import { exportGantt } from "devextreme/pdf_exporter"
Parameters:
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 v2.3.1+ library to export data and the jsPDF-AutoTable plugin to create tables in exported files.
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:
jQuery
JavaScript
const ganttInstance = $('#gantt').dxGantt({
toolbar: {
items: [
// ...
{
widget: 'dxButton',
options: {
icon: 'exportpdf',
hint: 'Export to PDF',
stylingMode: 'text',
onClick() {
exportGantt();
},
},
},
],
},
}).dxGantt('instance');
function exportGantt() {
DevExpress.pdfExporter.exportGantt({
component: ganttInstance,
createDocumentMethod: (args) => new jsPDF(args),
format: 'a4',
exportMode: 'all',
dateRange: 'visible'
},
).then((doc) => {
doc.save('gantt.pdf');
});
}Angular
app.component.html
app.component.ts
app.module.ts
<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 { }Vue
App.vue
<template>
<DxGantt ... >
<DxToolbar>
<!-- ... -->
<DxItem
:options="exportButtonOptions"
widget="dxButton"
/>
</DxToolbar>
<!-- ... -->
</DxGantt>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import 'devexpress-gantt/dist/dx-gantt.css';
import {
DxGantt,
DxToolbar,
DxItem
// ...
} from 'devextreme-vue/gantt';
import { jsPDF } from 'jspdf';
import 'jspdf-autotable';
import { exportGantt as exportGanttToPdf } from 'devextreme/pdf_exporter';
const ganttRef = 'gantt';
export default {
components: {
DxGantt,
DxToolbar,
DxItem
// ...
},
data() {
return {
exportButtonOptions: {
hint: 'Export to PDF',
icon: 'exportpdf',
stylingMode: 'text',
onClick: () => {
this.exportGantt();
},
},
};
},
computed: {
gantt() {
return this.$refs[ganttRef].instance;
},
},
methods: {
exportGantt() {
exportGanttToPdf({
component: this.gantt,
createDocumentMethod: (args) => new jsPDF(args),
format: 'a4',
exportMode: 'all',
dateRange: 'visible',
}).then((doc) => doc.save('gantt.pdf'));
},
},
};
</script>React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import 'devexpress-gantt/dist/dx-gantt.css';
import Gantt, {
Toolbar, Item,
} from 'devextreme-react/gantt';
import { exportGantt as exportGanttToPdf } from 'devextreme/pdf_exporter';
import { jsPDF } from 'jspdf';
import 'jspdf-autotable';
const App = () => {
const ganttRef = React.createRef();
const exportButtonOptions = {
icon: 'exportpdf',
hint: 'Export to PDF',
stylingMode: 'text',
onClick: 'exportButtonClick',
};
const exportButtonClick = (e) => {
const gantt = ganttRef.current.instance;
exportGanttToPdf(
{
component: gantt,
createDocumentMethod: (args) => new jsPDF(args),
format: 'a4',
exportMode: 'all',
dateRange: 'visible',
},
).then((doc) => doc.save('gantt.pdf'));
}
return (
<Gantt ... >
<Toolbar>
{/* ... */}
<Item
widget="dxButton"
options={this.exportButtonOptions}
/>
</Toolbar>
{/* ... */}
</Gantt>
);
};
export default App;ASP.NET Core Controls
Razor C#
@(Html.DevExtreme().Gantt()
.Toolbar(t => {
t.Items(i => {
i.Add().Name("exportpdf")
.Widget(widget => widget.Button()
.OnClick("exportGantt")
.Icon("exportpdf")
.Hint("Export to PDF")
.StylingMode(ButtonStylingMode.Text)
);
});
})
// ...
)
<script>
function getGanttInstance() {
return $("#gantt").dxGantt("instance");
}
function exportGantt() {
var ganttInstance = getGanttInstance();
ganttInstance.exportToPdf(
{
format: 'a4',
exportMode: 'all',
dateRange: 'visible''
}
).then(doc => {
doc.save('gantt.pdf');
});
}
</script>ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().Gantt()
.Toolbar(t => {
t.Items(i => {
i.Add().Name("exportpdf")
.Widget(widget => widget.Button()
.OnClick("exportGantt")
.Icon("exportpdf")
.Hint("Export to PDF")
.StylingMode(ButtonStylingMode.Text)
);
});
})
// ...
)
<script>
function getGanttInstance() {
return $("#gantt").dxGantt("instance");
}
function exportGantt() {
var ganttInstance = getGanttInstance();
ganttInstance.exportToPdf(
{
format: 'a4',
exportMode: 'all',
dateRange: 'visible''
}
).then(doc => {
doc.save('gantt.pdf');
});
}
</script>The following code snippet illustrates how to process the PDF document when the export is complete:
JavaScript
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:
JavaScript
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');
});Feedback