Complete Examples | Header & Footer

Professional Document Header/Footer

PaginationPlus.configure({
  headerLeft: `<h1 style="margin: 0; font-size: 18px;">Company Report</h1>
<p style="margin: 0; font-size: 12px; color: #6b7280;">Q4 2024 Financial Analysis</p>`,
  headerRight: `<span style="font-weight: 600;">Page {page}</span>`,

  footerLeft: `<p style="margin: 0;"><strong>Confidential</strong><br>
<small>Internal Use Only</small></p>`,
  footerRight: `<p style="margin: 0;">Page {page} of {total}<br>
<small>Generated: ${new Date().toLocaleDateString()}</small></p>`,
})

Academic Paper Style

PaginationPlus.configure({
  headerLeft: `<p style="margin: 0;"><strong>Research Paper Title</strong><br>
<em>Author Name</em></p>`,
  headerRight: "Page {page}",

  footerLeft: `<p style="margin: 0; font-size: 10px;">© 2024 All Rights Reserved</p>`,
  footerRight: `<p style="margin: 0; font-size: 10px;">Page {page}</p>`,
})

Business Document Style

PaginationPlus.configure({
  headerLeft: `<div>
<h2 style="margin: 0; color: #1f2937;">Business Proposal</h2>
<p style="margin: 0; font-size: 11px; color: #6b7280;">Proposal #2024-001</p>
</div>`,
  headerRight: `<span style="color: #3b82f6; font-weight: 600;">Page {page}</span>`,

  footerLeft: `<p style="margin: 0;"><strong>Company Name</strong><br>
123 Business St, City, State 12345<br>
Phone: (555) 123-4567</p>`,
  footerRight: `<p style="margin: 0; text-align: right;">Page {page}<br>
<small>Valid until: 12/31/2024</small></p>`,
})

Simple Document Style

PaginationPlus.configure({
  headerLeft: "Document Title",
  headerRight: "Page {page}",
  footerLeft: "Confidential",
  footerRight: "Page {page}",
})

Company Letterhead Style

PaginationPlus.configure({
  headerLeft: `<h1 style="margin: 0; color: #2563eb;">Company Name</h1>
<p style="margin: 0; font-size: 12px;">123 Business Street<br>
City, State 12345</p>`,
  headerRight: `<span style="color: #6b7280;">Page {page}</span>`,

  footerLeft: `<p style="margin: 0; font-size: 10px;">© 2024 Company Name. All rights reserved.</p>`,
  footerRight: `<p style="margin: 0; font-size: 10px;">Page {page}</p>`,
})

Invoice Style

PaginationPlus.configure({
  headerLeft: `<h2 style="margin: 0;">INVOICE</h2>
<p style="margin: 0; font-size: 12px;">Invoice #INV-2024-001<br>
Date: ${new Date().toLocaleDateString()}</p>`,
  headerRight: `<span style="font-weight: 600;">Page {page}</span>`,

  footerLeft: `<p style="margin: 0;"><strong>Payment Terms:</strong><br>
Net 30 days</p>`,
  footerRight: `<p style="margin: 0;">Page {page}<br>
<small>Thank you for your business!</small></p>`,
})

Report Style

PaginationPlus.configure({
  headerLeft: `<h1 style="margin: 0; font-size: 20px;">Annual Report 2024</h1>
<p style="margin: 0; font-size: 11px; color: #6b7280;">Financial Year Summary</p>`,
  headerRight: `<span style="color: #3b82f6;">Page {page}</span>`,

  footerLeft: `<p style="margin: 0; font-size: 10px;"><strong>Confidential Report</strong><br>
For Internal Use Only</p>`,
  footerRight: `<p style="margin: 0; font-size: 10px;">Page {page}<br>
<small>Generated: ${new Date().toLocaleDateString()}</small></p>`,
})

Document with Per-Page Customization

PaginationPlus.configure({
  // Default header/footer
  headerLeft: "Main Document",
  headerRight: "Page {page}",
  footerLeft: "Confidential",
  footerRight: "Page {page}",

  // Custom header for cover page
  customHeader: {
    1: {
      headerLeft: "",
      headerRight: ""
    }
  },

  // Custom header for chapter pages
  customHeader: {
    5: {
      headerLeft: "Chapter 1: Introduction",
      headerRight: "Page {page}"
    },
    15: {
      headerLeft: "Chapter 2: Main Content",
      headerRight: "Page {page}"
    }
  }
})

Interactive Header/Footer

PaginationPlus.configure({
  headerLeft: `<span style="cursor: pointer; text-decoration: underline; color: #2563eb;">Click to go to top</span>`,
  headerRight: "Page {page}",
  footerLeft: "Confidential",
  footerRight: `<span style="cursor: pointer;">Page {page} - Click for info</span>`,

  onHeaderClick: ({ event, pageNumber }) => {
    window.scrollTo({ top: 0, behavior: 'smooth' })
  },

  onFooterClick: ({ event, pageNumber }) => {
    alert(`You are on page ${pageNumber}`)
  }
})

Combined: Per-Page + Interactive

PaginationPlus.configure({
  headerLeft: "Document Title",
  headerRight: "Page {page}",
  footerLeft: "Default Footer",
  footerRight: "Page {page}",

  // Custom header for page 2
  customHeader: {
    2: {
      headerLeft: `<span style="cursor: pointer; color: #2563eb;">Chapter 2 - Click me</span>`,
      headerRight: "Page {page}"
    }
  },

  onHeaderClick: ({ event, pageNumber }) => {
    if (pageNumber === 2) {
      console.log('Chapter 2 header clicked!')
      // Navigate to chapter 2 content
    } else {
      window.scrollTo({ top: 0, behavior: 'smooth' })
    }
  }
})

Related Topics

• Basic Usage - Learn the fundamentals
• Multiline Support - Create multiline content
• Rich Text Support - Format with HTML
• Dynamic Variables - Use variables like {page}
• Per-Page Customization - Customize headers/footers for specific pages
• Interactive Headers & Footers - Add click callbacks