Vue 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

jQuery
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');
});
Angular
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 { }
Vue
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>
React
App.js
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.

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

jQuery
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');
});
Angular
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 { }
Vue
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>
React
App.js
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.

Type:

Boolean

jQuery
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');
});
Angular
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 { }
Vue
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>
React
App.js
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.

Type:

Boolean

jQuery
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');
});
Angular
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 { }
Vue
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>
React
App.js
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.

Type:

Boolean

jQuery
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');
});
Angular
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 { }
Vue
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>
React
App.js
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.

Type:

Object

jQuery
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');
});
Angular
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 { }
Vue
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>
React
App.js
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.

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.

jQuery
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');
});
Angular
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 { }
Vue
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>
React
App.js
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;

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.