Vue Common - Object Structures - PdfCell

An object that configures export to PDF settings in a DataGrid cell.

import { Cell } from "devextreme/common/export/pdf"
Type:

Object

The customDrawCell and customizeCell functions use this object.

View Demo

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 '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>

backgroundColor

Specifies the background color of the cell.

Type:

String

Default Value: '#FFFFFF'

The color must be in the hexadecimal format.

borderColor

Specifies the color of the cell's outer borders.

Type:

String

Default Value: '#979797'

The color must be in the hexadecimal format.

borderWidth

Specifies the width of the cell's borders.

Type:

Number

Default Value: 0.5

Uses the measure units that are specified in the constructor of the jsPDFDocument object.

drawBottomBorder

Specifies whether to show cell's bottom border.

Type:

Boolean

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,
  • customizeCell: function(options) {
  • const { gridCell, pdfCell } = options;
  •  
  • if(gridCell.rowType === 'data') {
  • pdfCell.drawBottomBorder = false;
  • }
  • }
  • }).then(() => {
  • doc.save('Customers.pdf');
  • });
  • }
  • }
  • }
  • </script>

drawLeftBorder

Specifies whether to show cell's left border.

Type:

Boolean

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,
  • customizeCell: function(options) {
  • const { gridCell, pdfCell } = options;
  •  
  • if(gridCell.rowType === 'data') {
  • pdfCell.drawLeftBorder = false;
  • }
  • }
  • }).then(() => {
  • doc.save('Customers.pdf');
  • });
  • }
  • }
  • }
  • </script>

drawRightBorder

Specifies whether to show cell's right border.

Type:

Boolean

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,
  • customizeCell: function(options) {
  • const { gridCell, pdfCell } = options;
  •  
  • if(gridCell.rowType === 'data') {
  • pdfCell.drawRightBorder = false;
  • }
  • }
  • }).then(() => {
  • doc.save('Customers.pdf');
  • });
  • }
  • }
  • }
  • </script>

drawTopBorder

Specifies whether to show cell's top border.

Type:

Boolean

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,
  • customizeCell: function(options) {
  • const { gridCell, pdfCell } = options;
  •  
  • if(gridCell.rowType === 'data') {
  • pdfCell.drawTopBorder = false;
  • }
  • }
  • }).then(() => {
  • doc.save('Customers.pdf');
  • });
  • }
  • }
  • }
  • </script>

font

An object that contains information about the font's size, name, and style.

Type:

Object

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,
  • 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>

horizontalAlign

Specifies the horizontal alignment for the text inside the exported cell.

Type:

String

Accepted Values: 'left' | 'center' | 'right'

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.

Type:

Object

Uses the measure units which are specified in the constructor of the jsPDFDocument object.

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,
  • 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>

text

The cell's text.

Type:

String

textColor

Specifies the text color for the cell.

Type:

String

Default Value: '#000000'

The color must be in the hexadecimal format.

verticalAlign

Specifies the vertical alignment for the text inside the exported cell.

Type:

String

Default Value: 'middle'
Accepted Values: 'top' | 'middle' | 'bottom'

wordWrapEnabled

Specifies whether to enable word wrapping in the resulting PDF file.

Type:

Boolean

The default value depends on the value of the DataGrid's wordWrapEnabled property.