Header and Footer of PDF exporting in React Gantt Chart Component

18 Nov 201824 minutes to read

Customizing headers and footers in PDF exports of the React Gantt Chart component allows adding text, lines, page numbers, and images to enhance document professionalism for projects. Use PdfExportProperties with header and footer to define content arrays, specifying type (e.g., Text, Line), value, position, style, or src for images with base64 encoding. Disable footers via enableFooter set to false, ensuring tailored outputs with the PdfExport module injected and allowPdfExport enabled.

Write a text in header and footer

Customize text in headers or footers using the header or footer properties in PdfExportProperties. Set type to Text, define value for the text, position for x/y coordinates, and style for color or font size.

let exportProperties: PdfExportProperties = {
    header: {
        fromTop: 0,
        height: 130,
        contents: [
            {
                type: 'Text',
                value: 'INVOICE',
                position: { x: 380, y: 0 },
                style: { textBrushColor: '#C25050', fontSize: 25 },
            },

        ]
    }
}

Draw a line in header and footer

Customize lines in headers or footers using the header or footer properties in PdfExportProperties. Set type to Line, define points for start/end coordinates, pageNumberType for position, and style for color, width, or dash style.

let exportProperties: PdfExportProperties = {
    header: {
        fromTop: 0,
        height: 130,
        contents: [
            {
                type: 'Line',
                style: { penColor: '#000080', penSize: 2, dashStyle: 'Solid' },
                points: { x1: 0, y1: 4, x2: 685, y2: 4 }
            }
        ]
    }
}

Draw a page number in header and footer

Add page numbers to headers or footers using the header or footer properties in PdfExportProperties. Set type to PageNumber, define format for display (e.g., ‘Page {$current} of {$total}’), position for x/y coordinates, and style for color or font size.

let exportProperties: PdfExportProperties = {
    footer: {
        fromBottom: 0,
        height: 20,
        contents: [
            {
                type: 'PageNumber',
                pageNumberType: 'Arabic',
                format: 'Page {$current} of {$total}',
                position: { x: 0, y: 0 },
                style: { textBrushColor: '#ffff80', fontSize: 15, hAlign: 'Center' }
            }
        ]
    }
}

Insert an image in header and footer

Add images to headers or footers using the header or footer properties in PdfExportProperties. Set type to Image, define src as a base64 string, position for x/y coordinates, and size for height/width.

Note: PDF Export supports base64 string to export the images.

// Replace it with a valid Base64-encoded image.
let image: string = "/9j/4AAQSkZJRgABAQEAeAB4AAD..." 

let exportProperties: PdfExportProperties = {
    header: {
        fromTop: 0,
        height: 130,
        contents: [
            {
                type: 'Image',
                src: image,
                position: { x: 40, y: 10 },
                size: { height: 100, width: 250 },
            }
        ]
    }
}

The below code illustrates the pdf export customization.

index.jsx

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

function App() {
    const ganttRef = null;

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

    const toolbar = ['PdfExport'];

    const toolbarClick = (args) => {
        if (args.item.id === 'ganttDefault_pdfexport') {
            const exportProperties = {
                header: {
                    fromTop: 0,
                    height: 150,
                    contents: [
                        {
                            type: 'Text',
                            value: 'Welcome',
                            position: { x: 380, y: 0 },
                            style: { textBrushColor: '#C25050', fontSize: 25 }
                        },
                        {
                            type: 'Image',
                            src: image,
                            position: { x: 400, y: 70 },
                            size: { height: 50, width: 50 }
                        }
                    ]
                },
                footer: {
                    fromBottom: 160,
                    height: 100,
                    contents: [
                        {
                            type: 'Text',
                            value: 'Thank you!',
                            position: { x: 350, y: 40 },
                            style: { textBrushColor: '#C67878', fontSize: 14 }
                        },
                        {
                            type: 'PageNumber',
                            pageNumberType: 'Arabic',
                            format: 'Page {$current} of {$total}',
                            position: { x: 0, y: 25 },
                            size: { height: 50, width: 100 },
                            style: { textBrushColor: '#000000', hAlign: 'Center', vAlign: 'Bottom' }
                        }
                    ]
                }
            };
            ganttRef.pdfExport(exportProperties);
        }
    };

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

ReactDOM.render(<App />, document.getElementById('root'));

index.tsx

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

function App() {
    const ganttRef: any = null;

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

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

    const toolbarClick = (args: any): void => {
        if (args.item.id === 'ganttDefault_pdfexport') {
            const exportProperties: PdfExportProperties = {
                header: {
                    fromTop: 0,
                    height: 150,
                    contents: [
                        {
                            type: 'Text',
                            value: 'Welcome',
                            position: { x: 380, y: 0 },
                            style: { textBrushColor: '#C25050', fontSize: 25 }
                        },
                        {
                            type: 'Image',
                            src: image,
                            position: { x: 400, y: 70 },
                            size: { height: 50, width: 50 }
                        }
                    ]
                },
                footer: {
                    fromBottom: 160,
                    height: 100,
                    contents: [
                        {
                            type: 'Text',
                            value: 'Thank you!',
                            position: { x: 350, y: 40 },
                            style: { textBrushColor: '#C67878', fontSize: 14 }
                        },
                        {
                            type: 'PageNumber',
                            pageNumberType: 'Arabic',
                            format: 'Page {$current} of {$total}',
                            position: { x: 0, y: 25 },
                            size: { height: 50, width: 100 },
                            style: { textBrushColor: '#000000', hAlign: 'Center', vAlign: 'Bottom' }
                        }
                    ]
                }
            };
            ganttRef.pdfExport(exportProperties);
        }
    };

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

ReactDOM.render(<App />, document.getElementById('root'));

index.html

<!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/34.1.29/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>

Disable footer

By default, the exported PDF file includes a footer. The footer can be disabled by setting the enableFooter property to false.

index.jsx

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 taskSettings = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    };

    const toolbar = ['PdfExport'];

    let ganttRef;

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

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

ReactDOM.render(<App />, document.getElementById('root'));

index.tsx

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 { TaskFieldsModel, ToolbarItem, PdfExportProperties } from '@syncfusion/ej2-react-gantt';
import { editingData } from './datasource';

function App() {

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

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

    let ganttRef: GanttComponent;

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

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

ReactDOM.render(<App />, document.getElementById('root'));

index.html

<!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/34.1.29/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>

Export with external form elements

To include external form elements (such as headers and footers) in the exported PDF along with the Gantt Chart, use the header and footer properties within the pdfExportProperties configuration.

index.jsx

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() {

    let ganttRef = null;

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

    const toolbar = ['PdfExport'];

    const toolbarClick = (args) => {
        if (args.item.id === 'ganttDefault_pdfexport') {
            const name = document.getElementById('name').value || '';
            const email = document.getElementById('email').value || '';
            const message = document.getElementById('message').value || '';
            const headerText = `Name: ${name}\nEmail: ${email}\nMessage: ${message}`;
            const exportProperties = {
                header: {
                    fromTop: 100,
                    height: 150,
                    contents: [
                        {
                            type: 'Text',
                            value: headerText,
                            position: { x: 50, y: 30 },
                            style: { textBrushColor: '#C25050', fontSize: 30, hAlign: 'Center', vAlign: 'Top' }
                        }
                    ]
                },
                footer: {
                    fromBottom: 0,
                    height: 0,
                    contents: []
                },
                fitToWidthSettings: {
                    isFitToWidth: true
                }
            };
            ganttRef.pdfExport(exportProperties);
        }
    };

    return (
        <div>
            <div className="form-container">
                <form id="formComponent">
                    <div className="e-input-group">
                        <input className="e-input" id="name" type="text" placeholder=" " required />
                        <span className="e-float-text">Name</span>
                    </div>
                    <div className="e-input-group">
                        <input className="e-input" id="email" type="email" placeholder=" " required />
                        <span className="e-float-text">Email</span>
                    </div>
                    <div className="e-input-group">
                        <textarea className="e-input" id="message" rows={2} placeholder=" "></textarea>
                        <span className="e-float-text">Message</span>
                    </div>
                </form>
            </div>

            <div className="gantt-container">
                <GanttComponent
                    ref={(g) => ganttRef = g}
                    id="ganttDefault"
                    height="520px"
                    dataSource={editingData}
                    taskFields={taskSettings}
                    toolbar={toolbar}
                    toolbarClick={toolbarClick}
                    allowPdfExport={true}
                    treeColumnIndex={1}
                >
                    <ColumnsDirective>
                        <ColumnDirective field="TaskID" />
                        <ColumnDirective field="TaskName" />
                        <ColumnDirective field="StartDate" />
                        <ColumnDirective field="Duration" />
                        <ColumnDirective field="Progress" />
                    </ColumnsDirective>
                    <Inject services={[Toolbar, PdfExport, Selection]} />
                </GanttComponent>
            </div>
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));

index.tsx

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 { TaskFieldsModel, ToolbarItem, PdfExportProperties } from '@syncfusion/ej2-react-gantt';
import { editingData } from './datasource';

function App() {

    let ganttRef: any = null;

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

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

    const toolbarClick = (args: any): void => {
        if (args.item.id === 'ganttDefault_pdfexport') {
            const name = (document.getElementById('name') as HTMLInputElement).value || '';
            const email = (document.getElementById('email') as HTMLInputElement).value || '';
            const message = (document.getElementById('message') as HTMLTextAreaElement).value || '';
            const headerText = `Name: ${name}\nEmail: ${email}\nMessage: ${message}`;
            const exportProperties: PdfExportProperties = {
                header: {
                    fromTop: 100,
                    height: 150,
                    contents: [
                        {
                            type: 'Text',
                            value: headerText,
                            position: { x: 50, y: 30 },
                            style: { textBrushColor: '#C25050', fontSize: 30, hAlign: 'Center', vAlign: 'Top' }
                        }
                    ]
                },
                footer: {
                    fromBottom: 0,
                    height: 0,
                    contents: []
                },
                fitToWidthSettings: {
                    isFitToWidth: true
                }
            };
            ganttRef.pdfExport(exportProperties);
        }
    };

    return (
        <div>
            <div className="form-container">
                <form id="formComponent">
                    <div className="e-input-group">
                        <input className="e-input" id="name" type="text" placeholder=" " required />
                        <span className="e-float-text">Name</span>
                    </div>
                    <div className="e-input-group">
                        <input className="e-input" id="email" type="email" placeholder=" " required />
                        <span className="e-float-text">Email</span>
                    </div>
                    <div className="e-input-group">
                        <textarea className="e-input" id="message" rows={2} placeholder=" "></textarea>
                        <span className="e-float-text">Message</span>
                    </div>
                </form>
            </div>

            <div className="gantt-container">
                <GanttComponent
                    ref={(g: any) => ganttRef = g}
                    id="ganttDefault"
                    height="520px"
                    dataSource={editingData}
                    taskFields={taskSettings}
                    toolbar={toolbar}
                    toolbarClick={toolbarClick}
                    allowPdfExport={true}
                    treeColumnIndex={1}
                >
                    <ColumnsDirective>
                        <ColumnDirective field="TaskID" />
                        <ColumnDirective field="TaskName" />
                        <ColumnDirective field="StartDate" />
                        <ColumnDirective field="Duration" />
                        <ColumnDirective field="Progress" />
                    </ColumnsDirective>
                    <Inject services={[Toolbar, PdfExport, Selection]} />
                </GanttComponent>
            </div>
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));

index.html

<!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/34.1.29/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%;
        }

        .form-container {
            max-width: 400px;
            margin-bottom: 20px;
        }

        .e-float-input {
            margin-bottom: 20px;
        }
    </style>
</head>

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

</html>

See also

• How to export to PDF?
• How to customize PDF export?
• How to manage task dependencies?