Syncfusion AI Assistant

How can I help you?

PDF Export in React Gantt Chart Component

30 Apr 202624 minutes to read

PDF export in the React Gantt Chart component enables exporting project data to PDF documents for sharing or archiving, using the pdfExport method with allowPdfExport set to true and PdfExport module injected. This feature supports exporting timelines, tasks, and dependencies, with options for indicators via base64 images, blob objects for previews, single-page layouts, multiple Gantt instances in one file, and themes like Tailwind3 or Bootstrap. Focus on auto-scheduled tasks for accurate export, as manual scheduling is not currently supported.

Export basic Gantt data

Export Gantt data to PDF by setting allowPdfExport to true and calling pdfExport, which generates a document with the chart and tree-grid data.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Toolbar, PdfExport, Selection } from '@syncfusion/ej2-react-gantt';
import { editingData } from './datasource';

function App() {

    const taskFields = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    };

    const toolbar = ['PdfExport'];

    let ganttInstance = null;

    const toolbarClick = (args) => {
        if (args.item.id === 'ganttDefault_pdfexport') {
            ganttInstance.pdfExport();
        }
    };

    return (
        <GanttComponent
            id="ganttDefault"
            dataSource={editingData}
            taskFields={taskFields}
            toolbar={toolbar}
            height="430px"
            allowPdfExport={true}
            toolbarClick={toolbarClick}
            ref={g => (ganttInstance = g)}
        >
            <Inject services={[Toolbar, PdfExport, Selection]} />
        </GanttComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Toolbar, PdfExport, Selection, TaskFieldsModel, ToolbarItem } from '@syncfusion/ej2-react-gantt';
import { editingData } from './datasource';

function App() {

    const taskFields: TaskFieldsModel = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    };

    const toolbar: ToolbarItem[] = ['PdfExport'];

    let ganttInstance: GanttComponent | null = null;

    const toolbarClick = (args: any): void => {
        if (args.item.id === 'ganttDefault_pdfexport') {
            ganttInstance.pdfExport();
        }
    };

    return (
        <GanttComponent
            id="ganttDefault"
            dataSource={editingData}
            taskFields={taskFields}
            toolbar={toolbar}
            height="430px"
            allowPdfExport={true}
            toolbarClick={toolbarClick}
            ref={g => (ganttInstance = g)}
        >
            <Inject services={[Toolbar, PdfExport, Selection]} />
        </GanttComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/tailwind3.css" rel="stylesheet" type="text/css" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
    <div id='root'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

Include indicators in PDF export

Include dynamic indicators and images in PDF export by defining them with base64 encoding in the data source, mapped to the taskFields.indicators property, enhancing visual representation of task status.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Toolbar, PdfExport, Selection } from '@syncfusion/ej2-react-gantt';
import { editingData } from './datasource';

function App() {

    const taskFields = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID',
        indicators: 'Indicators'
    };

    const toolbar = ['PdfExport'];

    let ganttInstance = null;

    const toolbarClick = (args) => {
        if (args.item.id === 'ganttDefault_pdfexport') {
            ganttInstance.pdfExport();
        }
    };

    return (
        <GanttComponent
            id="ganttDefault"
            dataSource={editingData}
            taskFields={taskFields}
            toolbar={toolbar}
            height="430px"
            allowPdfExport={true}
            toolbarClick={toolbarClick}
            ref={g => (ganttInstance = g)}
        >
            <Inject services={[Toolbar, PdfExport, Selection]} />
        </GanttComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Toolbar, PdfExport, Selection, TaskFieldsModel, ToolbarItem } from '@syncfusion/ej2-react-gantt';
import { editingData } from './datasource';

function App() {

    const taskFields: TaskFieldsModel = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID',
        indicators: 'Indicators'
    };

    const toolbar: ToolbarItem[] = ['PdfExport'];

    let ganttInstance: GanttComponent | null = null;

    const toolbarClick = (args: any): void => {
        if (args.item.id === 'ganttDefault_pdfexport') {
            ganttInstance.pdfExport();
        }
    };

    return (
        <GanttComponent
            id="ganttDefault"
            dataSource={editingData}
            taskFields={taskFields}
            toolbar={toolbar}
            height="430px"
            allowPdfExport={true}
            toolbarClick={toolbarClick}
            ref={g => (ganttInstance = g)}
        >
            <Inject services={[Toolbar, PdfExport, Selection]} />
        </GanttComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/tailwind3.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
		 .e-gantt .e-gantt-chart .e-custom-holiday {
           background-color:lightgreen;
        }
    </style>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Export Gantt data as blob object

Export Gantt data as a blob object for previews or modifications by setting the fourth argument of pdfExport to true, with the blob returned in the pdfExportComplete event.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Toolbar, PdfExport, ExcelExport, Selection, TaskFieldsModel, ToolbarItem } from '@syncfusion/ej2-react-gantt';
import { editingData } from './datasource';

function App() {

    const taskFields = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    };

    const toolbar = ['PdfExport', 'ExcelExport'];

    let ganttRef = null;

    const toolbarClick = (args) => {
        if (args.item.id === 'ganttDefault_pdfexport') {
            ganttRef.pdfExport(undefined, undefined, undefined, true);
        }
        if (args.item.id === 'ganttDefault_excelexport') {
            ganttRef.excelExport(undefined, undefined, undefined, true);
        }
    };

    const excelExportComplete = (args) => {
        args.promise.then((e) => {
            exportBlob(e.blobData);
        });
    };

    const pdfExportComplete = (args) => {
        args.promise.then((e) => {
            exportBlob(e.blobData);
        });
    };

    const exportBlob = (blob) => {
        const a = document.createElement('a');
        document.body.appendChild(a);
        a.style.display = 'none';
        const url = window.URL.createObjectURL(blob);
        a.href = url;
        a.download = 'Export';
        a.click();
        window.URL.revokeObjectURL(url);
        document.body.removeChild(a);
    };

    return (
        <GanttComponent
            id="ganttDefault"
            dataSource={editingData}
            taskFields={taskFields}
            toolbar={toolbar}
            height="430px"
            allowPdfExport={true}
            allowExcelExport={true}
            treeColumnIndex={1}
            toolbarClick={toolbarClick}
            excelExportComplete={excelExportComplete}
            pdfExportComplete={pdfExportComplete}
            ref={g => (ganttRef = g)}
        >
            <Inject services={[Toolbar, PdfExport, ExcelExport, Selection]} />

            <ColumnsDirective>
                <ColumnDirective field="TaskID" />
                <ColumnDirective field="TaskName" />
                <ColumnDirective field="StartDate" />
                <ColumnDirective field="Duration" />
                <ColumnDirective field="Progress" />
            </ColumnsDirective>

        </GanttComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Toolbar, PdfExport, ExcelExport, Selection, TaskFieldsModel, ToolbarItem } from '@syncfusion/ej2-react-gantt';
import { editingData } from './datasource';

function App() {

    const taskFields: TaskFieldsModel = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    };

    const toolbar: ToolbarItem[] = ['PdfExport', 'ExcelExport'];

    let ganttRef: GanttComponent | null = null;

    const toolbarClick = (args: any): void => {
        if (args.item.id === 'ganttDefault_pdfexport') {
            ganttRef.pdfExport(undefined, undefined, undefined, true);
        }
        if (args.item.id === 'ganttDefault_excelexport') {
            ganttRef.excelExport(undefined, undefined, undefined, true);
        }
    };

    const excelExportComplete = (args: any): void => {
        args.promise.then((e: { blobData: Blob }) => {
            exportBlob(e.blobData);
        });
    };

    const pdfExportComplete = (args: any): void => {
        args.promise.then((e: { blobData: Blob }) => {
            exportBlob(e.blobData);
        });
    };

    const exportBlob = (blob: Blob): void => {
        const a = document.createElement('a');
        document.body.appendChild(a);
        a.style.display = 'none';
        const url = window.URL.createObjectURL(blob);
        a.href = url;
        a.download = 'Export';
        a.click();
        window.URL.revokeObjectURL(url);
        document.body.removeChild(a);
    };

    return (
        <GanttComponent
            id="ganttDefault"
            dataSource={editingData}
            taskFields={taskFields}
            toolbar={toolbar}
            height="430px"
            allowPdfExport={true}
            allowExcelExport={true}
            treeColumnIndex={1}
            toolbarClick={toolbarClick}
            excelExportComplete={excelExportComplete}
            pdfExportComplete={pdfExportComplete}
            ref={g => (ganttRef = g)}
        >
            <Inject services={[Toolbar, PdfExport, ExcelExport, Selection]} />

            <ColumnsDirective>
                <ColumnDirective field="TaskID" />
                <ColumnDirective field="TaskName" />
                <ColumnDirective field="StartDate" />
                <ColumnDirective field="Duration" />
                <ColumnDirective field="Progress" />
            </ColumnsDirective>

        </GanttComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/tailwind3.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Single page exporting in Gantt

Export Gantt rows to a single PDF page by setting fitToWidthSettings.isFitToWidth to true in PdfExportProperties. Customize chart and grid widths using chartWidth and gridWidth as percentages.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Toolbar, PdfExport, Selection, TaskFieldsModel, ToolbarItem, PdfExportProperties } from '@syncfusion/ej2-react-gantt';
import { editingData } from './datasource';

function App() {

    const taskFields = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        dependency: 'Predecessor',
        parentID: 'ParentID'
    };

    const toolbar = ['PdfExport'];

    let ganttRef = null;

    const toolbarClick = (args) => {
        if (args.item.id === 'ganttDefault_pdfexport') {
            const exportProps = {
                fitToWidthSettings: {
                    isFitToWidth: true
                }
            };
            ganttRef.pdfExport(exportProps);
        }
    };

    return (
        <GanttComponent
            id="ganttDefault"
            dataSource={editingData}
            taskFields={taskFields}
            toolbar={toolbar}
            height="430px"
            allowPdfExport={true}
            toolbarClick={toolbarClick}
            ref={(g) => (ganttRef = g)}
        >
            <Inject services={[Toolbar, PdfExport, Selection]} />

            <ColumnsDirective>
                <ColumnDirective field="TaskID" />
                <ColumnDirective field="TaskName" />
                <ColumnDirective field="StartDate" />
                <ColumnDirective field="EndDate" />
                <ColumnDirective field="Duration" />
                <ColumnDirective field="Progress" />
                <ColumnDirective field="Predecessor" />
            </ColumnsDirective>

        </GanttComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Toolbar, PdfExport, Selection, TaskFieldsModel, ToolbarItem, PdfExportProperties } from '@syncfusion/ej2-react-gantt';
import { editingData } from './datasource';

function App() {

    const taskFields: TaskFieldsModel = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        dependency: 'Predecessor',
        parentID: 'ParentID'
    };

    const toolbar: ToolbarItem[] = ['PdfExport'];

    let ganttRef: GanttComponent | null = null;

    const toolbarClick = (args: any): void => {
        if (args.item.id === 'ganttDefault_pdfexport') {
            const exportProps: PdfExportProperties = {
                fitToWidthSettings: {
                    isFitToWidth: true
                }
            };
            ganttRef.pdfExport(exportProps);
        }
    };

    return (
        <GanttComponent
            id="ganttDefault"
            dataSource={editingData}
            taskFields={taskFields}
            toolbar={toolbar}
            height="430px"
            allowPdfExport={true}
            toolbarClick={toolbarClick}
            ref={(g) => (ganttRef = g)}
        >
            <Inject services={[Toolbar, PdfExport, Selection]} />
            <ColumnsDirective>
                <ColumnDirective field="TaskID" />
                <ColumnDirective field="TaskName" />
                <ColumnDirective field="StartDate" />
                <ColumnDirective field="EndDate" />
                <ColumnDirective field="Duration" />
                <ColumnDirective field="Progress" />
                <ColumnDirective field="Predecessor" />
            </ColumnsDirective>
        </GanttComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/tailwind3.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
		 .e-gantt .e-gantt-chart .e-custom-holiday {
           background-color:lightgreen;
        }
    </style>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Multiple Gantt exporting

Export multiple Gantt instances to a single PDF file by calling pdfExport on each, with each Gantt exported to a new page in the same document.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Toolbar, PdfExport, Selection, TaskFieldsModel, ToolbarItem } from '@syncfusion/ej2-react-gantt';
import { editingData1, editingData2 } from './datasource';

function App() {

    const fTaskSettings = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    };

    const sTaskSettings = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    };

    const toolbar = ['PdfExport'];

    const projectStartDate = new Date('03/31/2019');
    const projectEndDate = new Date('04/14/2019');

    let gantt1 = null;
    let gantt2 = null;

    const toolbarClick = (args) => {
        if (args.item.id === 'ganttDefault1_pdfexport') {
            const firstPromise = gantt1.pdfExport({}, true);
            firstPromise.then((firstData) => {
                gantt2.pdfExport({}, false, firstData);
            });
        }
    };

    return (
        <div>
            <p><b>First Gantt:</b></p>

            <GanttComponent
                id="ganttDefault1"
                dataSource={editingData1}
                taskFields={fTaskSettings}
                toolbar={toolbar}
                height="280px"
                treeColumnIndex={1}
                allowPdfExport={true}
                projectStartDate={projectStartDate}
                projectEndDate={projectEndDate}
                toolbarClick={toolbarClick}
                ref={(g) => (gantt1 = g)}
            >
                <Inject services={[Toolbar, PdfExport, Selection]} />

                <ColumnsDirective>
                    <ColumnDirective field="TaskID" />
                    <ColumnDirective field="TaskName" />
                    <ColumnDirective field="StartDate" />
                    <ColumnDirective field="Duration" />
                    <ColumnDirective field="Progress" />
                </ColumnsDirective>
            </GanttComponent>

            <p><b>Second Gantt:</b></p>

            <GanttComponent
                id="ganttDefault2"
                dataSource={editingData2}
                taskFields={sTaskSettings}
                height="250px"
                allowPdfExport={true}
                treeColumnIndex={1}
                ref={(g) => (gantt2 = g)}
            >
                <Inject services={[PdfExport, Selection]} />

                <ColumnsDirective>
                    <ColumnDirective field="TaskID" />
                    <ColumnDirective field="TaskName" />
                    <ColumnDirective field="StartDate" />
                    <ColumnDirective field="Duration" />
                    <ColumnDirective field="Progress" />
                </ColumnsDirective>
            </GanttComponent>
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Toolbar, PdfExport, Selection, TaskFieldsModel, ToolbarItem } from '@syncfusion/ej2-react-gantt';
import { editingData1, editingData2 } from './datasource';

function App() {

    const fTaskSettings: TaskFieldsModel = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    };

    const sTaskSettings: TaskFieldsModel = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    };

    const toolbar: ToolbarItem[] = ['PdfExport'];

    const projectStartDate = new Date('03/31/2019');
    const projectEndDate = new Date('04/14/2019');

    let gantt1: GanttComponent | null = null;
    let gantt2: GanttComponent | null = null;

    const toolbarClick = (args: any): void => {
        if (args.item.id === 'ganttDefault1_pdfexport') {
            const firstPromise: Promise<any> = gantt1!.pdfExport({}, true);
            firstPromise.then((firstData: any) => {
                gantt2.pdfExport({}, false, firstData);
            });
        }
    };

    return (
        <div>
            <p><b>First Gantt:</b></p>

            <GanttComponent
                id="ganttDefault1"
                dataSource={editingData1}
                taskFields={fTaskSettings}
                toolbar={toolbar}
                height="280px"
                treeColumnIndex={1}
                allowPdfExport={true}
                projectStartDate={projectStartDate}
                projectEndDate={projectEndDate}
                toolbarClick={toolbarClick}
                ref={(g) => (gantt1 = g)}
            >
                <Inject services={[Toolbar, PdfExport, Selection]} />

                <ColumnsDirective>
                    <ColumnDirective field="TaskID" />
                    <ColumnDirective field="TaskName" />
                    <ColumnDirective field="StartDate" />
                    <ColumnDirective field="Duration" />
                    <ColumnDirective field="Progress" />
                </ColumnsDirective>
            </GanttComponent>

            <p><b>Second Gantt:</b></p>

            <GanttComponent
                id="ganttDefault2"
                dataSource={editingData2}
                taskFields={sTaskSettings}
                height="250px"
                allowPdfExport={true}
                treeColumnIndex={1}
                ref={(g) => (gantt2 = g)}
            >
                <Inject services={[PdfExport, Selection]} />

                <ColumnsDirective>
                    <ColumnDirective field="TaskID" />
                    <ColumnDirective field="TaskName" />
                    <ColumnDirective field="StartDate" />
                    <ColumnDirective field="Duration" />
                    <ColumnDirective field="Progress" />
                </ColumnsDirective>
            </GanttComponent>
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/tailwind3.css" rel="stylesheet" type="text/css" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
    <div id='root'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

Apply themes in PDF export

Apply themes to exported PDF documents by setting the theme property in PdfExportProperties to values like Tailwind3, Fabric, Bootstrap, or Bootstrap4, customizing the appearance.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Toolbar, PdfExport, Selection } from '@syncfusion/ej2-react-gantt';
import { editingData } from './datasource';

function App() {

    const taskFields = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    };

    const toolbar = ['PdfExport'];

    let ganttRef = null;

    const toolbarClick = (args) => {
        if (args.item.id === 'ganttDefault_pdfexport') {
            const exportProperties = {
                theme: 'Fabric'
            };
            ganttRef.pdfExport(exportProperties);
        }
    };

    return (
        <GanttComponent
            id="ganttDefault"
            dataSource={editingData}
            taskFields={taskFields}
            toolbar={toolbar}
            height="430px"
            treeColumnIndex={1}
            allowPdfExport={true}
            toolbarClick={toolbarClick}
            ref={(g) => (ganttRef = g)}
        >
            <Inject services={[Toolbar, PdfExport, Selection]} />
        </GanttComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Toolbar, PdfExport, Selection, TaskFieldsModel, ToolbarItem, PdfExportProperties } from '@syncfusion/ej2-react-gantt';
import { editingData } from './datasource';

function App() {

    const taskFields: TaskFieldsModel = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    };

    const toolbar: ToolbarItem[] = ['PdfExport'];

    let ganttRef: GanttComponent | null = null;

    const toolbarClick = (args: any): void => {
        if (args.item.id === 'ganttDefault_pdfexport') {
            const exportProperties: PdfExportProperties = {
                theme: 'Fabric'
            };
            ganttRef.pdfExport(exportProperties);
        }
    };

    return (
        <GanttComponent
            id="ganttDefault"
            dataSource={editingData}
            taskFields={taskFields}
            toolbar={toolbar}
            height="430px"
            treeColumnIndex={1}
            allowPdfExport={true}
            toolbarClick={toolbarClick}
            ref={(g) => (ganttRef = g)}
        >
            <Inject services={[Toolbar, PdfExport, Selection]} />
        </GanttComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/tailwind3.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

See also