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:

The customDrawCell and customizeCell functions use this object.

index.js


$(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');
});

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

index.js


$(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');
});

drawLeftBorder

Specifies whether to show cell's left border.

Type:

Boolean

index.js


$(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');
});

drawRightBorder

Specifies whether to show cell's right border.

Type:

Boolean

index.js


$(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');
});

drawTopBorder

Specifies whether to show cell's top border.

Type:

Boolean

index.js


$(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');
});

font

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

Type:

Object

index.js


$(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');
});

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.

index.js


$(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');
});