Contents
- How to write a text in header or footer
- How to draw a line in header or footer
- Add page number in header or footer
- Insert an image in header or footer
Having trouble getting help?
Contact Support
Contact Support
Adding header and footer in Angular Treegrid component
27 Apr 202412 minutes to read
You can customize text, page number, line, page size and changing orientation in header and footer.
How to write a text in header or footer
You can add text either in Header or Footer of exported PDF document.
let exportProperties: PdfExportProperties = {
header: {
fromTop: 0,
height: 130,
contents: [
{
type: 'Text',
value: "Task Details",
position: { x: 0, y: 50 },
style: { textBrushColor: '#000000', fontSize: 13 }
},
]
}
How to draw a line in header or footer
you can add line either in Header or Footer of the exported PDF document.
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 or footer
you can add page number either in Header or Footer of exported PDF document.
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' }
}
]
}
}
Insert an image in header or footer
Image (Base64 string) can be added in the exported document in header/footer using the exportProperties
.
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,ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { PageService, PdfExportService, ToolbarService } from '@syncfusion/ej2-angular-treegrid'
import {ButtonModule} from '@syncfusion/ej2-angular-buttons'
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'
import { Component, OnInit, ViewChild } from '@angular/core';
import { sampleData } from './datasource';
import { PdfTrueTypeFont } from '@syncfusion/ej2-pdf-export';
import { ToolbarItems } from '@syncfusion/ej2-treegrid';
import { PdfExportProperties } from '@syncfusion/ej2-grids';
import { image } from './image';
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';
@Component({
imports: [
TreeGridModule,
ButtonModule,
DropDownListAllModule,
],
providers: [PageService,
PdfExportService,
ToolbarService],
standalone: true,
selector: 'app-container',
template: `<ejs-treegrid [dataSource]='data' height='220' #treegrid (toolbarClick)='toolbarClick($event)' [allowPaging]='true' [allowPdfExport]='true' [pageSettings]='pager' [treeColumnIndex]='1' childMapping='subtasks' [toolbar]='toolbarOptions'>
<e-columns>
<e-column field='taskID' headerText='Task ID' textAlign='Right' width=90></e-column>
<e-column field='taskName' headerText='Task Name' textAlign='Left' width=180></e-column>
<e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' width=120></e-column>
<e-column field='duration' headerText='Duration' textAlign='Right' width=110></e-column>
</e-columns>
</ejs-treegrid>`
})
export class AppComponent implements OnInit {
public data?: Object[];
public pager?: Object;
@ViewChild('treegrid')
public treeGridObj?: TreeGridComponent;
public toolbarOptions?: ToolbarItems[];
ngOnInit(): void {
this.data = sampleData;
this.pager = { pageSize: 7 };
this.toolbarOptions = ['PdfExport'];
}
toolbarClick(args: Object | any) : void {
if (args['item'].text === 'PDF Export') {
let pdfExportProperties: PdfExportProperties = {
header: {
fromTop: 0,
height: 130,
contents: [
{
type: 'Image',
src: image,
position: { x: 40, y: 10 },
size: { height: 100, width: 250 },
}
]
},
footer: {
fromBottom: 160,
height: 150,
contents: [
{
type: 'PageNumber',
pageNumberType: 'Arabic',
format: 'Page {$current} of {$total}',
position: { x: 0, y: 25 },
style: { textBrushColor: '#ffff80', fontSize: 15 }
}
]
}
};
(this.treeGridObj as TreeGridComponent).pdfExport(pdfExportProperties);
}
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));