Headers & Footers

Add custom headers and footers to your PDFs.

Headers & Footers

Add professional headers and footers to your PDF documents with page numbers, dates, and custom content.

Basic Usage

Headers and footers are specified as HTML strings in the options object:

{
  "markdown": "# My Document",
  "options": {
    "header": "<div style='text-align: center;'>Header Content</div>",
    "footer": "<div style='text-align: center;'>Footer Content</div>",
    "margin": {
      "top": "40mm",
      "bottom": "30mm"
    }
  }
}

Headers and footers require adequate margins. If your margins are too small, they may be cut off or overlap with content.

Dynamic Variables

Use special CSS classes to insert dynamic values:

Class	Description	Example Output
`pageNumber`	Current page number	1, 2, 3...
`totalPages`	Total page count	10
`date`	Current date	1/18/2025
`title`	Document title	My Document
`url`	Source URL (URL to PDF only)	https://...

Using Variables

<div>
  Page <span class="pageNumber"></span> of <span class="totalPages"></span>
</div>

Renders as: "Page 1 of 10"

Styling

Headers and footers support inline CSS:

<div style="
  width: 100%;
  font-size: 10px;
  font-family: Arial, sans-serif;
  color: #666;
  padding: 0 20mm;
  display: flex;
  justify-content: space-between;
">
  <span>Company Name</span>
  <span>Page <span class="pageNumber"></span></span>
</div>

Supported CSS Properties

font-size, font-family, font-weight
color, background-color
text-align
padding, margin
display: flex and flexbox properties
border-bottom, border-top

Common Patterns

Simple Page Numbers

{
  "options": {
    "footer": "<div style='text-align: center; font-size: 10px; color: #666;'>Page <span class='pageNumber'></span></div>",
    "margin": { "bottom": "20mm" }
  }
}

Page X of Y

{
  "options": {
    "footer": "<div style='text-align: center; font-size: 10px;'>Page <span class='pageNumber'></span> of <span class='totalPages'></span></div>",
    "margin": { "bottom": "20mm" }
  }
}

Document Title + Page Number

{
  "options": {
    "header": "<div style='width: 100%; padding: 0 20mm; font-size: 9px; display: flex; justify-content: space-between;'><span class='title'></span><span>Page <span class='pageNumber'></span></span></div>",
    "margin": { "top": "30mm" }
  }
}

Company Branding

{
  "options": {
    "header": "<div style='width: 100%; padding: 0 20mm; border-bottom: 1px solid #e5e7eb; padding-bottom: 10px;'><img src='https://yoursite.com/logo.png' style='height: 20px;' /></div>",
    "footer": "<div style='width: 100%; padding: 0 20mm; font-size: 9px; color: #666; display: flex; justify-content: space-between;'><span>© 2025 Your Company</span><span>Page <span class='pageNumber'></span></span></div>",
    "margin": {
      "top": "40mm",
      "bottom": "25mm"
    }
  }
}

Confidential Watermark

{
  "options": {
    "header": "<div style='width: 100%; text-align: right; padding: 0 20mm; font-size: 10px; color: #dc2626; font-weight: bold;'>CONFIDENTIAL</div>",
    "margin": { "top": "30mm" }
  }
}

Date Generated

{
  "options": {
    "footer": "<div style='width: 100%; padding: 0 20mm; font-size: 9px; color: #666; display: flex; justify-content: space-between;'><span>Generated: <span class='date'></span></span><span>Page <span class='pageNumber'></span></span></div>",
    "margin": { "bottom": "25mm" }
  }
}

Full Example

const response = await fetch('https://api.pdfapi.dev/v1/pdf/markdown', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${process.env.PDFAPI_KEY}`,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    markdown: `# Quarterly Report

## Executive Summary

Lorem ipsum dolor sit amet...

## Financial Overview

| Metric | Q1 | Q2 | Q3 |
|--------|----|----|----|
| Revenue | $1M | $1.2M | $1.5M |

## Conclusion

Lorem ipsum...`,
    theme: 'corporate',
    options: {
      format: 'A4',
      margin: {
        top: '40mm',
        bottom: '30mm',
        left: '20mm',
        right: '20mm'
      },
      header: `<div style="width: 100%; padding: 0 20mm; font-size: 9px; color: #666; display: flex; justify-content: space-between; border-bottom: 1px solid #e5e7eb; padding-bottom: 10px;">
        <span style="font-weight: bold;">Acme Corp</span>
        <span>Q3 2025 Report - Confidential</span>
      </div>`,
      footer: `<div style="width: 100%; padding: 0 20mm; font-size: 9px; color: #666; display: flex; justify-content: space-between;">
        <span>Generated: <span class="date"></span></span>
        <span>Page <span class="pageNumber"></span> of <span class="totalPages"></span></span>
      </div>`
    }
  }),
});

Tips

Use adequate margins: Headers need ~30-40mm top margin, footers need ~25-30mm bottom margin
Keep it simple: Complex HTML may not render correctly
Test thoroughly: Preview your PDF to ensure headers/footers display correctly
Use inline styles: External stylesheets are not supported
Images: Use absolute URLs for images in headers/footers