Vue Common - Utils - pdfExporter

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

exportDataGrid(options) CTP

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 is resolved when the grid data is prepared for export. It is a native Promise or a jQuery.Promise when you use jQuery.

NOTE

This functionality is available as a community technology preview (CTP). Should you have any questions or suggestions prior to its official release, please create a new ticket in the DevExpress Support Center.

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

You can call this method at any point in your application. In this example, we call this method 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>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.9/jspdf.plugin.autotable.min.js"></script>
    <!-- DevExtreme sources are referenced here -->
</head>

Angular

Installation command

app.component.html

app.component.ts

app.module.ts

npm install jspdf jspdf-autotable

<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
        }).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

Installation command

App.vue

npm install jspdf jspdf-autotable

<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
            }).then(() => {
                doc.save('Customers.pdf');
            });
        }
    }
}
</script>

React

Installation command

App.js

npm install jspdf jspdf-autotable

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

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

View Demo

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 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.

The exportGantt(options) method allows you to save information about the Gantt chart's layout, appearance, and tasks. This method supports the following options:

createDocumentMethod - Specifies a function that creates a PDF document.
format {string | width?: number, height?: number } - Specifies the document size.
landscape {boolean} - Specifies whether to use horizontal orientation for the document.
fileName {string} - Specifies the file name.
exportMode {"all", "treeList", "chart"} - Specifies the part of the component to export (chart area, tree list area, or the entire component).
dateRange {"all" | "visible" | startDate? : Date, endDate? : Date, startIndex? : number, endIndex? : number } - Restricts data output against a specified date range.
margins { left?: number, top?: number, right?: number, bottom?: number } - Specifies the outer indents of the exported area.

The exporter supports standard PDF fonts. Refer to the Use of Unicode Characters / UTF-8 article to get information on how to use custom fonts for exporting.

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