Angular Common - Object Structures - PdfCell

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

import { Cell } from "devextreme/pdf_exporter"

The customDrawCell and customizeCell functions use this object.

View Demo

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';
  • 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 { }

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.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,
  • 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 { }

drawLeftBorder

Specifies whether to show cell's left border.

Type:

Boolean

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

drawRightBorder

Specifies whether to show cell's right border.

Type:

Boolean

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

drawTopBorder

Specifies whether to show cell's top border.

Type:

Boolean

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

font

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

Type:

Object

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

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.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,
  • 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 { }

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.