Headers & footers

header and footer accept any node input. They repeat on every page. Their measured height is removed from the content window. Bands never overlap with content.

const pdf = await render(report, {
  footer: (
    <div tw="flex w-full justify-center text-[10px] text-gray-500">
      Page <span className="pageNumber" /> of <span className="totalPages" />
    </div>
  ),
});

Page counters

Elements with pageNumber or totalPages receive counter text. This matches Chromium's print header and footer template contract.

Add a CSS @counter-style name to the class list. It formats the number:

  footer: (
    <div style={{ fontSize: 12 }}>
      第 <span className="pageNumber trad-chinese-informal" /> 頁,共{" "}
      <span className="totalPages trad-chinese-informal" /> 頁
    </div>
  ),

Band height is measured once with three-digit counters. Reaching 100 pages does not shift the layout between pages.