All docs
V22.1
22.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.

pdfExporter

An object that serves as a namespace for the methods that export DevExtreme UI components to PDF.

exportDataGrid(options)

Exports grid data to a PDF file.

import { exportDataGrid } from "devextreme/pdf_exporter"
Parameters:

Export settings.

Return Value:

Promise<void> (jQuery or native)

A Promise that is resolved when the grid data is prepared for export. It is a native Promise or a jQuery.Promise when you use jQuery.

View Demo

This method requires the jsPDF library to export data and create PDF files.

If you use jQuery, declare the jsPDF CDN links within the <head> tag of the HTML markup (see an example below). If you use Angular, Vue or React, install the library with the following command:

npm install jspdf

You can call this method at any point in your application. In this example, this method is called in a standalone button's onClick handler:

jQuery
JavaScript
HTML
$(function(){
    $('#exportButton').dxButton({
        // ...
        onClick: function() {
            const doc = new jsPDF();
            DevExpress.pdfExporter.exportDataGrid({
                jsPDFDocument: doc,
                component: dataGrid
            }).then(function() {
                doc.save('Customers.pdf');
            });
        }
    });

    const dataGrid = $('#gridContainer').dxDataGrid({
        // ...
    }).dxDataGrid('instance');
});
<head>
    <!-- ... -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.0.0/jspdf.umd.min.js"></script>
    <!-- DevExtreme sources are referenced here -->
</head>
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
        }).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
            }).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';

export default function App() {
    const dataGridRef = useRef(null);

    function exportGrid() {
        const doc = new jsPDF();
        const dataGrid = dataGridRef.current.instance;

        exportDataGridToPdf({
            jsPDFDocument: doc,
            component: dataGrid
        }).then(() => {
            doc.save('Customers.pdf');
        });
    }

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

exportGantt(options)

Exports Gantt data to a PDF file.

import { exportGantt } from "devextreme/pdf_exporter"
Parameters:

Export settings.

Return Value:

Promise<any> (jQuery or native)

A Promise that is resolved after the Gantt data is exported. It is a native Promise or a jQuery.Promise when you use jQuery.

View Demo

This method requires the jsPDF library to export data and the jsPDF-AutoTable plugin to create tables in exported files.

You can call the exportGantt method at any point in your application. In the example below, this method is called in a standalone toolbar item's onClick event handler:

jQuery
JavaScript
const ganttInstance = $('#gantt').dxGantt({
    toolbar: {
        items: [
            // ...
            {
                widget: 'dxButton',
                options: {
                    icon: 'exportpdf',
                    hint: 'Export to PDF',
                    stylingMode: 'text',
                    onClick() {
                        exportGantt();
                    },
                },
            },
        ],
    },
}).dxGantt('instance');

function exportGantt() {
    DevExpress.pdfExporter.exportGantt({
        component: ganttInstance,
        createDocumentMethod: (args) => new jsPDF(args),
        format: 'a4',
        exportMode: 'all',
        dateRange: 'visible'
    },
).then((doc) => {
  doc.save('gantt.pdf');
  });
}
Angular
app.component.html
app.component.ts
app.module.ts
<dx-gantt ...>
    <dxo-toolbar>
        <!-- ... -->    
        <dxi-item
            widget="dxButton"
            [options]="exportButtonOptions">
        </dxi-item>
    </dxo-toolbar>
</dx-gantt>
import { Component } from '@angular/core';
import { jsPDF } from 'jspdf';
import 'jspdf-autotable';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    @ViewChild(DxGanttComponent, { static: false }) gantt: DxGanttComponent;
    exportButtonOptions: any;

    constructor() {
        this.exportButtonOptions = {
            hint: 'Export to PDF',
            icon: 'exportpdf',
            stylingMode: 'text',
            onClick: () => this.exportButtonClick()
        };
    }

    exportButtonClick() {
        const gantt = this.gantt.instance;  

        exportGanttToPdf(
            {
                component: gantt,
                createDocumentMethod: (args?: any) => new jsPDF(args),
                format: 'a4',
                exportMode: 'all'',
                dateRange: 'visible''
            }            
        ).then(doc => doc.save('gantt.pdf'));
    }
    // ...      
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxGanttComponent, DxGanttModule } from 'devextreme-angular';
import { exportGantt as exportGanttToPdf } from 'devextreme/pdf_exporter';

@NgModule({
    imports: [
        BrowserModule,
        DxGanttModule
    ],        
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
    <DxGantt ... >
        <DxToolbar>
            <!-- ... -->
            <DxItem
                :options="exportButtonOptions"
                widget="dxButton"
            />
        </DxToolbar>        
        <!-- ... -->
    </DxGantt>
</template>
<script>
    import 'devextreme/dist/css/dx.light.css';
    import 'devexpress-gantt/dist/dx-gantt.css'; 

    import { 
        DxGantt,
        DxToolbar,
        DxItem
        // ... 
    } from 'devextreme-vue/gantt';

    import { jsPDF } from 'jspdf';
    import 'jspdf-autotable';
    import { exportGantt as exportGanttToPdf } from 'devextreme/pdf_exporter';

    const ganttRef = 'gantt';

    export default {
        components: { 
            DxGantt,
            DxToolbar,
            DxItem
            // ... 
        },
        data() {
            return {
                exportButtonOptions: {
                    hint: 'Export to PDF',
                    icon: 'exportpdf',
                    stylingMode: 'text',
                    onClick: () => {
                        this.exportGantt();
                    },
                },
            };            
        },
        computed: {
            gantt() {
                return this.$refs[ganttRef].instance;
            },
        },
        methods: {
            exportGantt() {
                exportGanttToPdf({
                    component: this.gantt,
                    createDocumentMethod: (args) => new jsPDF(args),
                    format: 'a4',
                    exportMode: 'all',
                    dateRange: 'visible',
                }).then((doc) => doc.save('gantt.pdf'));
            },
        },
    };
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.light.css';
import 'devexpress-gantt/dist/dx-gantt.css'; 

import Gantt, { 
    Toolbar, Item,
} from 'devextreme-react/gantt';

import { exportGantt as exportGanttToPdf } from 'devextreme/pdf_exporter';
import { jsPDF } from 'jspdf';
import 'jspdf-autotable';

const App = () => {
    const ganttRef = React.createRef();

    const exportButtonOptions = {
        icon: 'exportpdf',
        hint: 'Export to PDF',
        stylingMode: 'text',
        onClick: 'exportButtonClick',
    };

    const exportButtonClick = (e) => {
        const gantt = ganttRef.current.instance;
        exportGanttToPdf(
            {
                component: gantt,
                createDocumentMethod: (args) => new jsPDF(args),
                format: 'a4',
                exportMode: 'all',
                dateRange: 'visible',
            },
        ).then((doc) => doc.save('gantt.pdf'));
    }

    return (
        <Gantt ... >
            <Toolbar>
                {/* ... */}
                <Item 
                    widget="dxButton" 
                    options={this.exportButtonOptions} 
                />
            </Toolbar>
            {/* ... */}
        </Gantt>
    );
};

export default App;
ASP.NET Core Controls
Razor C#
@(Html.DevExtreme().Gantt()
    .Toolbar(t => {
        t.Items(i => {
            i.Add().Name("exportpdf")
                .Widget(widget => widget.Button()
                .OnClick("exportGantt")
                .Icon("exportpdf")
                .Hint("Export to PDF")
                .StylingMode(ButtonStylingMode.Text)
                );
        });
    })        
    // ...
)

<script>
    function getGanttInstance() {
        return $("#gantt").dxGantt("instance");
    }
    function exportGantt() {
        var ganttInstance = getGanttInstance();
        ganttInstance.exportToPdf(
            {
                format: 'a4',
                exportMode: 'all',
                dateRange: 'visible''
            }
        ).then(doc => {
            doc.save('gantt.pdf');
        });
    }
</script>
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().Gantt()
    .Toolbar(t => {
        t.Items(i => {
            i.Add().Name("exportpdf")
                .Widget(widget => widget.Button()
                .OnClick("exportGantt")
                .Icon("exportpdf")
                .Hint("Export to PDF")
                .StylingMode(ButtonStylingMode.Text)
                );
        });
    })        
    // ...
)

<script>
    function getGanttInstance() {
        return $("#gantt").dxGantt("instance");
    }
    function exportGantt() {
        var ganttInstance = getGanttInstance();
        ganttInstance.exportToPdf(
            {
                format: 'a4',
                exportMode: 'all',
                dateRange: 'visible''
            }
        ).then(doc => {
            doc.save('gantt.pdf');
        });
    }
</script>

The following code snippet illustrates how to process the PDF document when the export is complete:

JavaScript
var gantt = $("#ganttContainer").dxGantt("instance");
gantt.exportToPdf({
    format: "A4",
    landscape: true,
    exportMode: "chart",
    dateRange: "visible"
}).then(function(doc) { 
    doc.addPage(); 
    // your code
    doc.save('customDoc.pdf'); 
});

To print the exported PDF document, call the autoPrint method:

JavaScript
var gantt = $("#ganttContainer").dxGantt("instance");
gantt.exportToPdf({
    format: "A4",
    landscape: true,
    exportMode: "chart",
    dateRange: "visible"
}).then(function(doc) { 
    doc.autoPrint(); 
    window.open(doc.output('your_url'), '_blank');
});