Headers and footers

A header or footer is one of four shapes: a single block, an array of blocks, a function of page context, or a raw draw callback. Functions run per page at build time.

type HeaderFooter =
  | Block
  | Block[]
  | ((ctx: PageContext) => Block | Block[])
  | RawDraw;

Page context

A function header or footer receives the page context, and a raw draw receives a draw area that extends it with the zone rectangle.

type PageContext = { page_number: number; page_count: number; date: Date };

interface DrawArea extends PageContext { x: number; y: number; width: number; height: number }
interface RawDraw { height: number; draw: (doc, area: DrawArea) => void }

Setting them

Set a header or footer document wide with doc.set_header and doc.set_footer, or per page through doc.page({ header, footer }).

Function footer

A function runs once per page, so it can read the current page number and total count.

doc.set_footer((ctx) => ({
  type: "paragraph",
  text: `Page ${ctx.page_number} of ${ctx.page_count}`,
  style: { font_size: 9, color: "#9ca3af", text_align: "right" },
}));

Raw draw header

A RawDraw declares a height and a draw callback. The callback receives the live pdfkit document and the zone rectangle, so you can draw vector graphics directly.

doc.set_header({
  height: 40,
  draw: (pdoc, area) => {
    pdoc.rect(area.x, area.y + area.height - 1, area.width, 1).fill("#e5e7eb");
  },
});

Per page headers and footers override the document wide ones for that page. Pass them through doc.page({ header, footer }).

Charts Components

​Page context

​Setting them

​Function footer

​Raw draw header

Page context

Setting them

Function footer

Raw draw header