jQuery/JS Common - Object Structures - PdfCell
An object that configures export to PDF settings in a DataGrid cell.
The customDrawCell and customizeCell functions use this object.
jQuery
$(function(){ $('#exportButton').dxButton({ // ... onClick: function() { const doc = new jsPDF(); DevExpress.pdfExporter.exportDataGrid({ jsPDFDocument: doc, component: dataGrid, customizeCell: function(options) { const { gridCell, pdfCell } = options; if(gridCell.rowType === 'data') { pdfCell.font = { size: 20 }; } } }).then(function() { doc.save('Customers.pdf'); }); } }); const dataGrid = $('#gridContainer').dxDataGrid({ // ... }).dxDataGrid('instance'); });
Angular
<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, customizeCell: function(options) { const { gridCell, pdfCell } = options; if(gridCell.rowType === 'data') { pdfCell.font = { size: 20 }; } } }).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
<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, customizeCell: function(options) { const { gridCell, pdfCell } = options; if(gridCell.rowType === 'data') { pdfCell.font = { size: 20 }; } } }).then(() => { doc.save('Customers.pdf'); }); } } } </script>
React
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'; const App = () => { const dataGridRef = useRef(null); function exportGrid() { const doc = new jsPDF(); const dataGrid = dataGridRef.current.instance; exportDataGridToPdf({ jsPDFDocument: doc, component: dataGrid, customizeCell: function(options) { const { gridCell, pdfCell } = options; if(gridCell.rowType === 'data') { pdfCell.font = { size: 20 }; } } }).then(() => { doc.save('Customers.pdf'); }); } return ( <React.Fragment> <Button ... onClick={exportGrid} /> <DataGrid ... ref={dataGridRef}> {/* ... */} </DataGrid> </React.Fragment> ); } export default App;
backgroundColor
Specifies the background color of the cell.
The color must be in the hexadecimal format.
borderColor
Specifies the color of the cell's outer borders.
The color must be in the hexadecimal format.
borderWidth
Specifies the width of the cell's borders.
Uses the measure units that are specified in the constructor of the jsPDFDocument object.
drawBottomBorder
Specifies whether to show cell's bottom border.
jQuery
$(function(){ $('#exportButton').dxButton({ // ... onClick: function() { const doc = new jsPDF(); DevExpress.pdfExporter.exportDataGrid({ jsPDFDocument: doc, component: dataGrid, customizeCell: function(options) { const { gridCell, pdfCell } = options; if(gridCell.rowType === 'data') { pdfCell.drawBottomBorder = false; } } }).then(function() { doc.save('Customers.pdf'); }); } }); const dataGrid = $('#gridContainer').dxDataGrid({ // ... }).dxDataGrid('instance'); });
Angular
<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, customizeCell: function(options) { const { gridCell, pdfCell } = options; if(gridCell.rowType === 'data') { pdfCell.drawBottomBorder = false; } } }).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
<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, customizeCell: function(options) { const { gridCell, pdfCell } = options; if(gridCell.rowType === 'data') { pdfCell.drawBottomBorder = false; } } }).then(() => { doc.save('Customers.pdf'); }); } } } </script>
React
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'; const App = () => { const dataGridRef = useRef(null); function exportGrid() { const doc = new jsPDF(); const dataGrid = dataGridRef.current.instance; exportDataGridToPdf({ jsPDFDocument: doc, component: dataGrid, customizeCell: function(options) { const { gridCell, pdfCell } = options; if(gridCell.rowType === 'data') { pdfCell.drawBottomBorder = false; } } }).then(() => { doc.save('Customers.pdf'); }); } return ( <React.Fragment> <Button ... onClick={exportGrid} /> <DataGrid ... ref={dataGridRef}> {/* ... */} </DataGrid> </React.Fragment> ); } export default App;
drawLeftBorder
Specifies whether to show cell's left border.
jQuery
$(function(){ $('#exportButton').dxButton({ // ... onClick: function() { const doc = new jsPDF(); DevExpress.pdfExporter.exportDataGrid({ jsPDFDocument: doc, component: dataGrid, customizeCell: function(options) { const { gridCell, pdfCell } = options; if(gridCell.rowType === 'data') { pdfCell.drawLeftBorder = false; } } }).then(function() { doc.save('Customers.pdf'); }); } }); const dataGrid = $('#gridContainer').dxDataGrid({ // ... }).dxDataGrid('instance'); });
Angular
<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, customizeCell: function(options) { const { gridCell, pdfCell } = options; if(gridCell.rowType === 'data') { pdfCell.drawLeftBorder = false; } } }).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
<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, customizeCell: function(options) { const { gridCell, pdfCell } = options; if(gridCell.rowType === 'data') { pdfCell.drawLeftBorder = false; } } }).then(() => { doc.save('Customers.pdf'); }); } } } </script>
React
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'; const App = () => { const dataGridRef = useRef(null); function exportGrid() { const doc = new jsPDF(); const dataGrid = dataGridRef.current.instance; exportDataGridToPdf({ jsPDFDocument: doc, component: dataGrid, customizeCell: function(options) { const { gridCell, pdfCell } = options; if(gridCell.rowType === 'data') { pdfCell.drawLeftBorder = false; } } }).then(() => { doc.save('Customers.pdf'); }); } return ( <React.Fragment> <Button ... onClick={exportGrid} /> <DataGrid ... ref={dataGridRef}> {/* ... */} </DataGrid> </React.Fragment> ); } export default App;
drawRightBorder
Specifies whether to show cell's right border.
jQuery
$(function(){ $('#exportButton').dxButton({ // ... onClick: function() { const doc = new jsPDF(); DevExpress.pdfExporter.exportDataGrid({ jsPDFDocument: doc, component: dataGrid, customizeCell: function(options) { const { gridCell, pdfCell } = options; if(gridCell.rowType === 'data') { pdfCell.drawRightBorder = false; } } }).then(function() { doc.save('Customers.pdf'); }); } }); const dataGrid = $('#gridContainer').dxDataGrid({ // ... }).dxDataGrid('instance'); });
Angular
<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, customizeCell: function(options) { const { gridCell, pdfCell } = options; if(gridCell.rowType === 'data') { pdfCell.drawRightBorder = false; } } }).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
<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, customizeCell: function(options) { const { gridCell, pdfCell } = options; if(gridCell.rowType === 'data') { pdfCell.drawRightBorder = false; } } }).then(() => { doc.save('Customers.pdf'); }); } } } </script>
React
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'; const App = () => { const dataGridRef = useRef(null); function exportGrid() { const doc = new jsPDF(); const dataGrid = dataGridRef.current.instance; exportDataGridToPdf({ jsPDFDocument: doc, component: dataGrid, customizeCell: function(options) { const { gridCell, pdfCell } = options; if(gridCell.rowType === 'data') { pdfCell.drawRightBorder = false; } } }).then(() => { doc.save('Customers.pdf'); }); } return ( <React.Fragment> <Button ... onClick={exportGrid} /> <DataGrid ... ref={dataGridRef}> {/* ... */} </DataGrid> </React.Fragment> ); } export default App;
drawTopBorder
Specifies whether to show cell's top border.
jQuery
$(function(){ $('#exportButton').dxButton({ // ... onClick: function() { const doc = new jsPDF(); DevExpress.pdfExporter.exportDataGrid({ jsPDFDocument: doc, component: dataGrid, customizeCell: function(options) { const { gridCell, pdfCell } = options; if(gridCell.rowType === 'data') { pdfCell.drawTopBorder = false; } } }).then(function() { doc.save('Customers.pdf'); }); } }); const dataGrid = $('#gridContainer').dxDataGrid({ // ... }).dxDataGrid('instance'); });
Angular
<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, customizeCell: function(options) { const { gridCell, pdfCell } = options; if(gridCell.rowType === 'data') { pdfCell.drawTopBorder = false; } } }).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
<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, customizeCell: function(options) { const { gridCell, pdfCell } = options; if(gridCell.rowType === 'data') { pdfCell.drawTopBorder = false; } } }).then(() => { doc.save('Customers.pdf'); }); } } } </script>
React
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'; const App = () => { const dataGridRef = useRef(null); function exportGrid() { const doc = new jsPDF(); const dataGrid = dataGridRef.current.instance; exportDataGridToPdf({ jsPDFDocument: doc, component: dataGrid, customizeCell: function(options) { const { gridCell, pdfCell } = options; if(gridCell.rowType === 'data') { pdfCell.drawTopBorder = false; } } }).then(() => { doc.save('Customers.pdf'); }); } return ( <React.Fragment> <Button ... onClick={exportGrid} /> <DataGrid ... ref={dataGridRef}> {/* ... */} </DataGrid> </React.Fragment> ); } export default App;
font
An object that contains information about the font's size, name, and style.
jQuery
$(function(){ $('#exportButton').dxButton({ // ... onClick: function() { const doc = new jsPDF(); DevExpress.pdfExporter.exportDataGrid({ jsPDFDocument: doc, component: dataGrid, customizeCell: function(options) { const { gridCell, pdfCell } = options; if(gridCell.rowType === 'data') { pdfCell.font = { size: 20, style: 'bold', name: 'Arial' }; } } }).then(function() { doc.save('Customers.pdf'); }); } }); const dataGrid = $('#gridContainer').dxDataGrid({ // ... }).dxDataGrid('instance'); });
Angular
<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, customizeCell: function(options) { const { gridCell, pdfCell } = options; if(gridCell.rowType === 'data') { pdfCell.font = { size: 20, style: 'bold', name: 'Arial' }; } } }).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
<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, customizeCell: function(options) { const { gridCell, pdfCell } = options; if(gridCell.rowType === 'data') { pdfCell.font = { size: 20, style: 'bold', name: 'Arial' }; } } }).then(() => { doc.save('Customers.pdf'); }); } } } </script>
React
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'; const App = () => { const dataGridRef = useRef(null); function exportGrid() { const doc = new jsPDF(); const dataGrid = dataGridRef.current.instance; exportDataGridToPdf({ jsPDFDocument: doc, component: dataGrid, customizeCell: function(options) { const { gridCell, pdfCell } = options; if(gridCell.rowType === 'data') { pdfCell.font = { size: 20, style: 'bold', name: 'Arial' }; } } }).then(() => { doc.save('Customers.pdf'); }); } return ( <React.Fragment> <Button ... onClick={exportGrid} /> <DataGrid ... ref={dataGridRef}> {/* ... */} </DataGrid> </React.Fragment> ); } export default App;
horizontalAlign
Specifies the horizontal alignment for the text inside the exported cell.
The default alignment of the content depends on the dataType.
dataType | alignment |
---|---|
'number' | 'right' |
'boolean' | 'center' |
'string' | 'left' |
'date' | 'left' |
'datetime' | 'left' |
padding
Specifies the top, bottom, left, and right paddings of the DataGrid cell.
Uses the measure units which are specified in the constructor of the jsPDFDocument object.
jQuery
$(function(){ $('#exportButton').dxButton({ // ... onClick: function() { const doc = new jsPDF(); DevExpress.pdfExporter.exportDataGrid({ jsPDFDocument: doc, component: dataGrid, customizeCell: function(options) { const { gridCell, pdfCell } = options; if(gridCell.rowType === 'data') { pdfCell.padding = { top: 10, right: 10, bottom: 10, left: 10 }; } } }).then(function() { doc.save('Customers.pdf'); }); } }); const dataGrid = $('#gridContainer').dxDataGrid({ // ... }).dxDataGrid('instance'); });
Angular
<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, customizeCell: function(options) { const { gridCell, pdfCell } = options; if(gridCell.rowType === 'data') { pdfCell.padding = { top: 10, right: 10, bottom: 10, left: 10 }; } } }).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
<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, customizeCell: function(options) { const { gridCell, pdfCell } = options; if(gridCell.rowType === 'data') { pdfCell.padding = { top: 10, right: 10, bottom: 10, left: 10 }; } } }).then(() => { doc.save('Customers.pdf'); }); } } } </script>
React
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'; const App = () => { const dataGridRef = useRef(null); function exportGrid() { const doc = new jsPDF(); const dataGrid = dataGridRef.current.instance; exportDataGridToPdf({ jsPDFDocument: doc, component: dataGrid, customizeCell: function(options) { const { gridCell, pdfCell } = options; if(gridCell.rowType === 'data') { pdfCell.padding = { top: 10, right: 10, bottom: 10, left: 10 }; } } }).then(() => { doc.save('Customers.pdf'); }); } return ( <React.Fragment> <Button ... onClick={exportGrid} /> <DataGrid ... ref={dataGridRef}> {/* ... */} </DataGrid> </React.Fragment> ); } export default App;
textColor
Specifies the text color for the cell.
The color must be in the hexadecimal format.
wordWrapEnabled
Specifies whether to enable word wrapping in the resulting PDF file.
The default value depends on the value of the DataGrid's wordWrapEnabled property.
If you have technical questions, please create a support ticket in the DevExpress Support Center.