Customizing Headers and Footers in PDF

A very common task in a document rendering is to customize page headers and footers by adding static text (like a document title) or page numbering. To help with that effort PdfDocument provides a way to configure these sections declaratively.

PdfRunningTitle is a class that represent the header and footer of a page. It provides the declarative property, that in turn, has the following properties:

  • text: Determines the the text of the running title.
  • brush: Determines the brush used to fill the text.
  • font: Determines the font of the text.

These properties can be defined while creating the PdfDocument class instance. When document rendering is done, the pages will be iterated over and specified text will be added to every page using given brush and font.

For example, the following code defines that "Title" string filled with the red color will be added to the header of every page:

import * as wjPdf from '@grapecity/wijmo.pdf';

var doc = new wjPdf.PdfDocument({
    header: {
        declarative: {
            text: "Title",
            brush: "#ff0000"

The text may contain up to 3 tabular characters ("\t") which are used for separating the text into the parts that will be aligned within the page area using left, center and right alignment. Two kinds of macro are supported, "&[Page]" and "&[Pages]". The former one designates the current page index while the latter one designates the page count.

For example:

  • "&[Page]": Adds current page index aligned to the left.
  • "\t&[Page] of &[Pages]": Adds page numbering formatted as "X of Y" (where "X" designates the current page index and "Y" designates the page count) and aligns it to the center.
  • "\tTitle\t&[Page]": Adds "Title" string centered and adds current page index aligned to the right.

For more information about using fonts and brushes, see the Fonts and Drawing Graphics topics.