Header and footer of PDF exporting in Angular Gantt component

17 May 202520 minutes to read

PDF export provides an option to specify and customize text, page number, line and image in header and footer of exported PDF document by using pdfExportProperties.

Write a text in header and footer

This functionality helps to customize the text that appears in the header or footer sections of a PDF document. Text can be added to header or footer of exported PDF document by using pdfExportProperties.

  • type property in the content array indicates the content type, such as ‘Text’.
  • Value property determines the text.
  • Position property determines the horizontal and vertical positions of the text element.
  • style property define the visual styling properties for the text element
let exportProperties: PdfExportProperties = {
    header: {
        fromTop: 0,
        height: 130,
        contents: [
            {
                type: 'Text',
                value: 'INVOICE',
                position: { x: 380, y: 0 },
                style: { textBrushColor: '#C25050', fontSize: 25 },
            },

        ]
    }
}

This functionality helps to customize the line that appears in the header or footer sections of the PDF document. A line can be added to header or footer of the exported PDF document by using pdfExportProperties.

  • type determines content type, such as ‘Line’.
  • style is used to set properties like the color (penColor), size (penSize), and style (dashStyle) of the line.
  • points specifies the coordinates for the start and end points of the line.

Supported line styles:

  • dash
  • dot
  • dashdot
  • dashdotdot
  • solid
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 }
            }
        ]
    }
}

Add page number in header and footer

This feature allows to customize the page number that appears in the header or footer sections of the PDF document. Page numbers can be added in header or footer of the exported PDF document by using pdfExportProperties.

  • type indicates that the content is a page number.
  • pageNumberType specifies the type of numbering to be used.
  • format is an optional attribute that allows you to customize the text format of the page number.
  • position defines the coordinates (x, y) where the page number will be located.
  • style sets the styling properties of the page number text, such as color (textBrushColor), font size (fontSize), and horizontal alignment (hAlign).

Supported page number types:

  • LowerLatin - a, b, c,
  • UpperLatin - A, B, C,
  • LowerRoman - i, ii, iii,
  • UpperRoman - I, II, III,
  • Number - 1,2,3.
 let exportProperties: PdfExportProperties = {
    header: {
        fromTop: 0,
        height: 130,
        contents: [
            {
                type: 'PageNumber',
                pageNumberType: 'Arabic',
                format: 'Page {$current} of {$total}', //optional
                position: { x: 0, y: 25 },
                style: { textBrushColor: '#ffff80', fontSize: 15, hAlign: 'Center' }
            }
        ]
    }
}

This feature allows to customize the image that appears in the header or footer sections of the PDF document. Image (Base64 string) can be added in the exported document in header or footer of the exported PDF document by using pdfExportProperties.

  • type indicates that the content is an image.
  • src specifies the source of the image, which should be Base64 string.
  • Position determines the horizontal and vertical positions of the image will be located.
  • size sets the dimensions of the image.

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.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GanttModule } from '@syncfusion/ej2-angular-gantt'
import { ToolbarService, PdfExportService, SelectionService } from '@syncfusion/ej2-angular-gantt'
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { Gantt, Toolbar, PdfExport, Selection, PdfExportProperties, ToolbarItem, GanttComponent } from '@syncfusion/ej2-angular-gantt';
import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
import { SelectionSettingsModel } from '@syncfusion/ej2-angular-grids';
import { editingData, image } from './data';


@Component({
imports: [
         GanttModule
    ],

providers: [ToolbarService, PdfExportService, SelectionService],
standalone: true,
    selector: 'app-root',
    template:
       `<ejs-gantt #gantt id="ganttDefault" height="430px" [dataSource]="data" [taskFields]="taskSettings" [toolbar]="toolbar"
       (toolbarClick)="toolbarClick($event)" allowPdfExport='true' [treeColumnIndex]="1"></ejs-gantt>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent{
    // Data for Gantt
    public data?: object[];
    public taskSettings?: object;
    public toolbar?: ToolbarItem[];
    @ViewChild('gantt', {static: true})
    public ganttChart?: GanttComponent;
    public ngOnInit(): void {
        this.data = editingData;
        this.taskSettings = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            parentID:'ParentID',
        };
        this.toolbar =  ['PdfExport'];
    }
    public toolbarClick(args: ClickEventArgs): void {
            if (args.item.id === 'ganttDefault_pdfexport') {
                let 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' }
                            }
                        ]
                    },
                };
                this.ganttChart!.pdfExport(exportProperties);
            }
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

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

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GanttModule } from '@syncfusion/ej2-angular-gantt'
import { ToolbarService, PdfExportService, SelectionService } from '@syncfusion/ej2-angular-gantt'
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { Gantt, Toolbar, PdfExport, Selection, PdfExportProperties, ToolbarItem, GanttComponent } from '@syncfusion/ej2-angular-gantt';
import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
import { SelectionSettingsModel } from '@syncfusion/ej2-angular-grids';
import { editingData } from './data';

@Component({
imports: [
         GanttModule
    ],

providers: [ToolbarService, PdfExportService, SelectionService],
standalone: true,
    selector: 'app-root',
    template:
       `<ejs-gantt #gantt id="ganttDefault" height="430px" [dataSource]="data" [taskFields]="taskSettings" [toolbar]="toolbar"
       (toolbarClick)="toolbarClick($event)" allowPdfExport='true' [treeColumnIndex]="1"></ejs-gantt>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent{
    // Data for Gantt
    public data?: object[];
    public taskSettings?: object;
    public toolbar?: ToolbarItem[];
    @ViewChild('gantt', {static: true})
    public ganttChart?: GanttComponent;
    public ngOnInit(): void {
        this.data = editingData;
        this.taskSettings = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            parentID:'ParentID',
        };
        this.toolbar =  ['PdfExport'];
    }
    public toolbarClick(args: ClickEventArgs): void {
            if (args.item.id === 'ganttDefault_pdfexport') {
                let exportProperties: PdfExportProperties = {
                  enableFooter: false
                };
                this.ganttChart!.pdfExport(exportProperties);
            }
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));