DoCreate
Sign Up

Headers & Footers

Add headers and footers to your PDF documents

Headers and footers appear on every page of your PDF document. They are ideal for displaying company logos, document titles, page numbers, dates, and legal disclaimers.

How Headers and Footers Work

DoCreate renders headers and footers separately from the main document body. They are defined using the headerHtml and footerHtml fields in your API request:

{
  "html": "<div>Your main document content...</div>",
  "css": "body { font-family: sans-serif; }",
  "headerHtml": "<div style='font-size: 10px; text-align: center; width: 100%;'>Confidential</div>",
  "footerHtml": "<div style='font-size: 10px; text-align: center; width: 100%;'>Page <span class='pageNumber'></span> of <span class='totalPages'></span></div>"
}

Headers render at the top of every page, and footers render at the bottom of every page.

Important: Inline Styles Required

Headers and footers are rendered in an isolated context. This means the css field does not apply to them. You must use inline styles directly in your headerHtml and footerHtml:

<!-- This will NOT work -- external CSS is ignored in headers/footers -->
<div class="header">Company Name</div>

<!-- This WILL work -- inline styles are applied -->
<div style="font-size: 10px; font-family: Helvetica, sans-serif; padding: 0 40px; width: 100%;">
  Company Name
</div>

Page Numbers

DoCreate provides special CSS classes that are automatically populated with page information:

CSS ClassDescription
pageNumberCurrent page number
totalPagesTotal number of pages

Use these classes on <span> elements inside your header or footer:

<div style="font-size: 9px; color: #999; text-align: right; padding: 0 40px; width: 100%;">
  Page <span class="pageNumber"></span> of <span class="totalPages"></span>
</div>

This renders as "Page 1 of 5", "Page 2 of 5", and so on.

Displaying the Date

To display a date in headers or footers, include it as a variable in your data object and reference it in your headerHtml or footerHtml:

{
  "headerHtml": "<div style='font-size: 9px; color: #666; text-align: right; padding: 0 40px; width: 100%;'>Generated: {{generatedDate}}</div>",
  "data": {
    "generatedDate": "17.02.2026"
  }
}

Simple Corporate Header

{
  "headerHtml": "<div style='display: flex; justify-content: space-between; align-items: center; padding: 0 40px; width: 100%; font-family: Helvetica, sans-serif; font-size: 10px; color: #666; border-bottom: 1px solid #eee; padding-bottom: 8px;'><span>Acme Corp</span><span>Invoice #INV-2026-042</span></div>"
}

Footer with Page Numbers and Legal Text

{
  "footerHtml": "<div style='display: flex; justify-content: space-between; padding: 0 40px; width: 100%; font-family: Helvetica, sans-serif; font-size: 8px; color: #999; border-top: 1px solid #eee; padding-top: 8px;'><span>Confidential - Do not distribute</span><span>Page <span class='pageNumber'></span> / <span class='totalPages'></span></span></div>"
}

Centered Header with Logo Text

{
  "headerHtml": "<div style='text-align: center; width: 100%; padding: 0 40px; font-family: Helvetica, sans-serif;'><div style='font-size: 14px; font-weight: bold; color: #111;'>ACME CORP</div><div style='font-size: 8px; color: #999; text-transform: uppercase; letter-spacing: 1px;'>Premium Solutions Since 2020</div></div>"
}

Complete Example

Here is a full API request with a header, footer, and multi-page content:

curl -X POST https://api.docreate.io/api/pdf/external \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -d '{
    "html": "<h1>Annual Report 2025</h1><h2>Executive Summary</h2><p>{{summary}}</p><div style=\"page-break-before: always;\"></div><h2>Financial Overview</h2><table><thead><tr><th>Quarter</th><th>Revenue</th><th>Growth</th></tr></thead><tbody>{{#each quarters}}<tr><td>{{this.name}}</td><td>{{this.revenue}}</td><td>{{this.growth}}</td></tr>{{/each}}</tbody></table><div style=\"page-break-before: always;\"></div><h2>Outlook</h2><p>{{outlook}}</p>",
    "css": "body { font-family: Helvetica, sans-serif; font-size: 12px; color: #333; padding: 20px 40px; } h1 { font-size: 28px; color: #111; } h2 { font-size: 18px; color: #111; margin-top: 32px; } table { width: 100%; border-collapse: collapse; margin: 16px 0; } th, td { padding: 10px; border-bottom: 1px solid #ddd; text-align: left; } th { background: #f5f5f5; }",
    "headerHtml": "<div style=\"display: flex; justify-content: space-between; padding: 0 40px; width: 100%; font-family: Helvetica, sans-serif; font-size: 9px; color: #999;\"><span>Acme Corp - Annual Report 2025</span><span>Confidential</span></div>",
    "footerHtml": "<div style=\"display: flex; justify-content: space-between; padding: 0 40px; width: 100%; font-family: Helvetica, sans-serif; font-size: 8px; color: #999; border-top: 1px solid #eee; padding-top: 6px;\"><span>Generated on {{generatedDate}}</span><span>Page <span class=\"pageNumber\"></span> of <span class=\"totalPages\"></span></span></div>",
    "data": {
      "summary": "In 2025, Acme Corp achieved record growth across all business units, driven by strong demand for our cloud platform and expansion into European markets.",
      "quarters": [
        { "name": "Q1 2025", "revenue": "2.4M EUR", "growth": "+12%" },
        { "name": "Q2 2025", "revenue": "2.8M EUR", "growth": "+17%" },
        { "name": "Q3 2025", "revenue": "3.1M EUR", "growth": "+11%" },
        { "name": "Q4 2025", "revenue": "3.6M EUR", "growth": "+16%" }
      ],
      "outlook": "We expect continued growth in 2026 with a focus on product innovation and international expansion.",
      "generatedDate": "17.02.2026"
    }
  }'

Adjusting Page Margins for Headers and Footers

When using headers and footers, make sure the @page margin in your CSS leaves enough room for them. The header and footer render inside the page margin area:

@page {
  margin: 30mm 20mm;
}

If your header or footer gets cut off, increase the top or bottom margin respectively.

Next Steps