ScreenshotNeo

BlogHTML to image & PDF

How to Display Footer Page Numbers with EvoPdf Document

Add “Page X of Y” footers in EvoPdf using the correct classic or browser-mode API, with fixes for missing numbers and clipped content.

By the ScreenshotNeo team30 September 20265 min read

How to Display Footer Page Numbers with EvoPdf Document

To display “Page 1 of 5” in EvoPdf, enable footer rendering, create a footer template, and add a text element containing Page &p; of &P;. In EvoPdf Next browser mode, use an HTML footer with pageNumber and totalPages classes instead.

1. Classic EvoPdf API

The classic API uses PDF elements rather than an HTML footer. The footer must be enabled before its options have any effect.

EvoPdf resolves the current and total page values when the footer is rendered.
EvoPdf resolves the current and total page values when the footer is rendered.
using System;

// Create your PdfDocument using the EvoPdf API used by your project.
var pdfDocument = new PdfDocument();

// Footer rendering must be enabled.
pdfDocument.PdfDocumentOptions.ShowFooter = true;

// Reserve 60 points for the footer.
pdfDocument.AddFooterTemplate(60);

// &p; is the current page number.
// &P; is the total page count.
var footerText = new TextElement(
    0,
    30,
    "Page &p; of &P;",
    new PdfFont("Times New Roman", 10, true));

pdfDocument.Footer.AddElement(footerText);

// Add pages/content and save using the document workflow in your EvoPdf version.

&p; is replaced with the current page number, while &P; is replaced with the document’s total page count. The footer is docked at the bottom and its height is included in the available body area.

Alignment, color, and spacing

Set the text element’s alignment, font, color, and coordinates according to the EvoPdf generation your project references. Keep the footer height large enough for the font and any separator line. If the footer is right aligned, calculate or use the element’s alignment properties rather than relying on a fixed x-coordinate that may clip longer totals such as “Page 100 of 100”.

Changing the numbering range

For documents that start at a number other than the default, configure PageNumberingStartIndex. If the displayed total needs an offset, configure PageNumberingPageCountIncrement. These settings affect the values substituted into the footer placeholders.

// Property names shown by the classic EvoPdf API.
pdfDocument.PdfDocumentOptions.PageNumberingStartIndex = 1;
pdfDocument.PdfDocumentOptions.PageNumberingPageCountIncrement = 0;

2. EvoPdf Next browser mode

EvoPdf Next browser mode renders an HTML header or footer template. It does not use the classic ampersand placeholders.

using EvoPdf;

var converter = new HtmlToPdfConverter();
converter.PdfDocumentOptions.EnableHeaderFooter = true;
converter.PdfDocumentOptions.BottomMargin = 40;
converter.PdfDocumentOptions.FooterTemplate = @"
<html>
  <body>
    <div style='width:100%; text-align:right'>
      Page <span class='pageNumber'></span>
      of <span class='totalPages'></span>
    </div>
  </body>
</html>";

byte[] pdf = converter.ConvertUrl("https://example.com");
System.IO.File.WriteAllBytes("output.pdf", pdf);

pageNumber receives the current page and totalPages receives the final page count. Set a sufficient BottomMargin; otherwise the footer can overlap the page body or be clipped.

3. Choosing the correct approach

Question Classic API EvoPdf Next browser mode
Rendering model PDF elements and templates HTML and CSS footer template
Current-page token &p; pageNumber class
Total-page token &P; totalPages class
Enable switch PdfDocumentOptions.ShowFooter PdfDocumentOptions.EnableHeaderFooter
Space reservation Footer template height Bottom margin
Best fit Existing classic EvoPdf document code HTML-to-PDF browser rendering

Check the package generation and namespace in your project before copying a sample. The two modes use different rendering and placeholder rules.

Classic EvoPdf and Next browser mode use different footer syntax and layout controls.
Classic EvoPdf and Next browser mode use different footer syntax and layout controls.

4. A reliable implementation checklist

  1. Confirm whether the project uses classic EvoPdf or EvoPdf Next browser mode.
  2. Enable the matching footer switch.
  3. Create a footer template with nonzero height or bottom margin.
  4. Use only the placeholder syntax for that mode.
  5. Add the footer text to the footer object or footer template, not the document body.
  6. Render a multi-page document and verify both the first and last page.
  7. Test a document with at least 100 pages if alignment depends on text width.

5. Troubleshooting missing or incorrect numbers

Symptom Likely cause Fix
No footer appears Footer rendering is disabled. Set ShowFooter = true for classic mode or EnableHeaderFooter = true for Next browser mode.
Literal &p; or empty spans appear Placeholder syntax does not match the rendering mode. Use &p;/&P; in classic mode, or pageNumber/totalPages classes in browser mode.
Footer is clipped Footer height or bottom margin is too small. Increase the classic footer template height or the Next BottomMargin.
Body text overlaps the footer The layout has not reserved enough bottom space. Increase the reserved footer height or bottom margin and render again.
Footer text is missing while other content works The text was added to the body instead of the footer. Add the element to pdfDocument.Footer or place it in FooterTemplate.
Numbers start at the wrong value A numbering offset is configured. Inspect PageNumberingStartIndex and reset it or set the intended starting index.
Total count is shifted A page-count increment is configured. Inspect PageNumberingPageCountIncrement.
Code does not compile The installed EvoPdf generation exposes different namespaces or properties. Verify the referenced package and use the API documentation for that generation.

6. Layout, performance, and reliability notes

  • Layout: Footer height participates in body-space calculation. Reserve space before tuning coordinates or CSS.
  • Long documents: Total-page substitution requires the final page count, so validate the last page as well as the first.
  • Fonts: Use a font available to the conversion environment and leave enough width for three-digit page totals.
  • Browser mode: Keep the HTML footer small and deterministic. Complex external assets can introduce rendering differences or delays.
  • Reliability: Pin the EvoPdf package generation in deployment and keep a regression document that checks first, middle, and last page footers.
  • Cost: EvoPdf licensing and infrastructure costs depend on your edition and deployment terms; the page-number feature itself is a document-layout setting.

7. Or skip the browser setup

If your goal is to capture a web page as an image or PDF rather than maintain an EvoPdf rendering environment, ScreenshotNeo provides a single API request. Its cookie and consent handling removes known consent banners, newsletter popups, and chat widgets before capture. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and response headers identify the page verdict and billing result. An MCP server lets Claude, Cursor, and other MCP clients call screenshot tools directly. Every plan includes the same features; 1,000 screenshots per month are free with no card, and paid plans start at $5 for 3,000 shots.

See the ScreenshotNeo API documentation for request options.

cURL

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

Python

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)

Node.js

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
require('fs').writeFileSync('shot.webp', Buffer.from(await res.arrayBuffer()));

Create a free ScreenshotNeo account with 1,000 screenshots each month and no card required.

8. FAQ

Can I use &p; in EvoPdf Next?

No. Use the browser footer classes pageNumber and totalPages.

Classic mode needs a footer template height. Browser mode needs enough bottom margin for the HTML footer.

Why does the total page count appear blank?

Check that the footer belongs to the selected rendering mode and that the document is being converted through the API that supports its placeholders.

Can numbering begin at zero?

Set the classic API’s PageNumberingStartIndex to the desired starting value and verify the output on the first page.