Vue Common - Utils - 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:

options:

PdfExportDataGridProps

Export settings.

Return Value:

Promise<void> (jQuery or native)

A Promise that resolves when grid data is ready for export. If you use jQuery, the return value is a jQuery.Promise. In other cases, it's a native JavaScript Promise.

View Demo

This method uses jsPDF v2.3.1+ to export data and create PDF files.

If you use jQuery, store links to the jsPDF library within the <head> tag. 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.

Warning: You need to perform extra steps to generate PDFs with non-ASCII characters. See the PDF Export guide for more information.

In the following example, the onClick handler of a standalone button fires this method:

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:

options:

PdfExportGanttProps

Export settings.

Return Value:

Promise<any> (jQuery or native)

A Promise that resolves when the Gantt data is ready for export. It is a native Promise or a jQuery.Promise when you use jQuery.

View Demo

This method uses jsPDF v2.3.1+ to generate PDF files, and the jsPDF-AutoTable plugin to create tables within the PDF.

Warning: You need to perform extra steps to generate PDFs with non-ASCII characters. See the PDF Export guide. for more information.

In the following example, the onClick handler of a standalone toolbar item fires this method:

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