Headers and Footers

Headers and footers are plain text drawn above and below the content on every page. Configure them via the header and footer fields in PDFConfig.

Basic Example

tsx

import { useEasyPdf } from "@easypdf/react";

const WithHeaderFooter = () => {
  const { pdfRef, downloadPDF, isLoading } = useEasyPdf({
    header: {
      text: "Acme Corp — Quarterly Report",
      fontSize: 10,
      fontColor: "#666666",
      align: "center",
    },
    footer: {
      text: "Page {pageNumber} of {totalPages}",
      fontSize: 10,
      fontColor: "#666666",
      align: "center",
    },
  });

  return (
    <div>
      <button onClick={() => downloadPDF(pdfRef)} disabled={isLoading}>
        {isLoading ? "Generating..." : "Download PDF"}
      </button>

      <div ref={pdfRef}>
        <h1>Quarterly Report</h1>
        <p>Report content here...</p>
      </div>
    </div>
  );
};

Page Variables

Use {pageNumber} and {totalPages} in any text string:

tsx

footer: {
  text: "Page {pageNumber} of {totalPages}",
}
// Renders as: "Page 1 of 4", "Page 2 of 4", etc.

Multi-line Text

Pass an array of strings for multi-line headers or footers:

tsx

header: {
  text: ["Acme Corp", "Confidential — Internal Use Only"],
  fontSize: 10,
  align: "center",
}

Alignment

tsx

// Left-aligned header with left margin
header: {
  text: "Section A",
  align: "left",
  marginLeft: 20,
}

// Right-aligned page number
footer: {
  text: "Page {pageNumber}",
  align: "right",
  marginRight: 20,
}

// Centered (default)
footer: {
  text: "© 2024 Acme Corp",
  align: "center",
}

Positioning

header.marginTop controls how far the header sits from the top edge. footer.marginBottom controls how far the footer sits from the bottom edge. If not set, they fall back to the page margins.top / margins.bottom.

tsx

useEasyPdf({
  margins: { top: 25, right: 20, bottom: 25, left: 20 },
  header: {
    text: "Document Title",
    marginTop: 8,   // override: 8mm from top edge
  },
  footer: {
    text: "Page {pageNumber} of {totalPages}",
    marginBottom: 8, // override: 8mm from bottom edge
  },
});

Different Header and Footer Per Section

Override at the method call level to change them per download:

tsx

// Draft version
await downloadPDF(pdfRef, {
  filename: "draft.pdf",
  header: { text: "DRAFT — DO NOT DISTRIBUTE", fontColor: "#FF0000", align: "center" },
});

// Final version
await downloadPDF(pdfRef, {
  filename: "final.pdf",
  header: { text: "Acme Corp — Q1 2024", align: "center" },
  footer: { text: "Confidential | Page {pageNumber} of {totalPages}", align: "center" },
});

No Header or Footer

Simply omit header and footer from your config — nothing will be drawn.

Headers and Footers ​

Basic Example ​

Page Variables ​

Multi-line Text ​

Alignment ​

Positioning ​

Different Header and Footer Per Section ​

No Header or Footer ​

Related ​