All docs
V21.1
21.2
21.1
20.2
20.1
The page you are viewing does not exist in version 20.1. This link will take you to the root page.
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

PdfExportDataGridProps

Properties that can be passed as a parameter to the exportDataGrid(options) method from the pdfExporter module.

import { PdfExportDataGridProps } from "devextreme/pdf_exporter"

autoTableOptions

Options of the generated PDF table. Refer to the jsPDF-autoTable plugin documentation to see the full list of available customizations.

Type:

Object

Default Value: undefined

component

A DataGrid instance. This setting is required.

Type:

DataGrid

Default Value: undefined

customizeCell

Customizes a cell in PDF after creation.

Type:

Function

Function parameters:
options:

Object

An object passed to this callback function.

Object structure:
Name Type Description
gridCell

PdfDataGridCell

A DataGrid cell.

pdfCell

Object

An object that describes a cell in a PDF file. Refer to the following Autotable documentation section to see available customizations: jsPDF-Autotable options.

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.styles = {
                            font: 'times',
                            fontSize: 14
                        }
                    }
                }
            }).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.styles = {
                        font: 'times',
                        fontSize: 14
                    }
                }
            }
        }).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.styles = {
                            font: 'times',
                            fontSize: 14
                        }
                    }
                }
            }).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.styles = {
                        font: 'times',
                        fontSize: 14
                    }
                }
            }
        }).then(() => {
            doc.save('Customers.pdf');
        });
    }

    return (
        <React.Fragment>
            <Button ...
                onClick={exportGrid}
            />
            <DataGrid ...
                ref={dataGridRef}>
                {/* ... */}
            </DataGrid>
        </React.Fragment>
    );
}

export default App;
See Also

jsPDFDocument

A jsPDF instance. This setting is required.

Type:

Object

Default Value: undefined

keepColumnWidths

Specifies whether columns in the PDF file should have the same width as their source UI component's columns.

Type:

Boolean

Default Value: true

loadPanel

Configures the load panel.

Type:

Object

selectedRowsOnly

Specifies whether or not to export only selected rows.

Type:

Boolean

Default Value: false