How can I help you?
Header and Footer of PDF exporting in Angular Gantt Chart Component
1 Feb 202624 minutes to read
Customizing headers and footers in PDF exports of the Angular 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.
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { GanttModule, ToolbarService, PdfExportService, SelectionService, PdfExportProperties, ToolbarItem, GanttComponent } from '@syncfusion/ej2-angular-gantt'
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';
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 implements OnInit {
@ViewChild('gantt', { static: true }) public ganttChart?: GanttComponent;
public data?: object[];
public taskSettings?: object;
public toolbar?: ToolbarItem[];
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));Disable footer
By default, the exported PDF file includes a footer. The footer can be disabled by setting the enableFooter property to false.
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { GanttModule, ToolbarService, PdfExportService, SelectionService, PdfExportProperties, ToolbarItem, GanttComponent } from '@syncfusion/ej2-angular-gantt'
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';
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 implements OnInit {
@ViewChild('gantt', { static: true }) public ganttChart?: GanttComponent;
public data?: object[];
public taskSettings?: object;
public toolbar?: ToolbarItem[];
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));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.
import { Component, ViewChild, OnInit } from '@angular/core';
import { GanttComponent, ToolbarItem, PdfExportProperties, GanttModule, PdfExportService, SelectionService, ToolbarService } from '@syncfusion/ej2-angular-gantt';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';
import { editingData } from './data';
@Component({
selector: 'app-root',
imports: [GanttModule],
providers: [ToolbarService, PdfExportService, SelectionService],
standalone: true,
template: `
<div class="form-container">
<form id="formComponent">
<div class="e-input-group">
<input class="e-input" id="name" type="text" placeholder=" " required />
<span class="e-float-text">Name</span>
</div>
<div class="e-input-group">
<input class="e-input" id="email" type="email" placeholder=" " required />
<span class="e-float-text">Email</span>
</div>
<div class="e-input-group">
<textarea class="e-input" id="message" rows="2" placeholder=" "></textarea>
<span class="e-float-text">Message</span>
</div>
</form>
</div>
<div class="gantt-container">
<ejs-gantt #gantt id="ganttDefault" height="520px" [dataSource]="data" [taskFields]="taskSettings" [toolbar]="toolbar"
(toolbarClick)="toolbarClick($event)" allowPdfExport="true" [treeColumnIndex]="1"
></ejs-gantt>
</div>`,
styles: [`
.form-container {
background: #ffffff;
padding: 24px 28px;
border: 1px solid #d1d9e0;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,.1);
width: 500px;
text-align: center;
}
.e-input-group {
margin-bottom: 16px;
}
.e-input-group .e-input {
height: 38px;
padding: 0 10px;
font-size: 13.5px;
border-radius: 6px;
}
.e-input-group textarea.e-input {
height: auto;
padding: 8px 10px;
resize: none;
border-radius: 6px;
}
.e-float-text {
font-size: 12.5px;
color: #2874A6;
font-weight: 500;
}
.e-input:focus {
border-color: #2874A6 !important;
box-shadow: 0 0 0 2px rgba(40,116,166,.15);
}
`]
})
export class AppComponent implements OnInit {
@ViewChild('gantt', { static: true }) public ganttChart!: GanttComponent;
public data: object[] = [];
public taskSettings: object = {};
public toolbar: ToolbarItem[] = ['PdfExport'];
public ngOnInit(): void {
this.data = editingData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID',
};
}
public toolbarClick(args: ClickEventArgs): 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,
},
};
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));