pdfExporter
exportDataGrid(options) CTP
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.
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.
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:
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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.9/jspdf.plugin.autotable.min.js"></script>
<!-- DevExtreme sources are referenced here -->
</head>Angular
Installation command
app.component.html
app.component.ts
app.module.ts
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 { }Vue
Installation command
App.vue
npm install jspdf jspdf-autotable
<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 'jspdf-autotable';
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
Installation command
App.js
npm install jspdf jspdf-autotable
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 'jspdf-autotable';
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>
);
}Feedback