PSPDFKit Server: Page Header and Footer

PSPDFKit Server has been deprecated and replaced by Document Engine. To start using Document Engine, refer to the migration guide. With Document Engine, you’ll have access to robust new capabilities (read the blog for more information).

You can add a custom header or footer that will be repeated across all pages of a PDF. This can be done directly from the same HTML template used for specifying the contents of the resulting PDF.

Adding a Header

To define a header you want repeated across all pages of a resulting PDF, you need to specify a container element using pspdfkit-header as its ID, and it must be the first child of the document’s body:

<div id="pspdfkit-header">
    <div class="header-columns">
        <div class="logotype">
            <img class="logo" src="logo.svg">
            <p>ACME Inc.</p>
        </div>

        <div>
            <p>Always improving.</p>
        </div>
    </div>
</div>

Before generating the PDF, the following CSS will be added before any style sheet already defined in the template. We don’t recommend overriding these properties, as it might break the header position:

#pspdfkit-header {
    display: flow-root;
}

The display: flow-root declaration defines a new block formatting context and suppresses margin collapsing so that any margin defined inside the header is preserved entirely across all pages in the resulting PDF.

To add a footer that you want repeated across all pages of a resulting PDF, you have to define a container element with the pspdfkit-footer ID, and it must be the last child of the document’s body:

<div id="pspdfkit-footer">
    <div class="footer-columns">
        <span>10/18/2021</span>
        <span>Page {{ pageNumber }} of {{ pageCount }}</span>
    </div>
</div>

#pspdfkit-footer {
    display: flow-root;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    width: 100%;
}

The display: flow-root declaration defines a new block formatting context and suppresses margin collapsing so that any margin defined inside the footer is preserved entirely across all pages in the resulting PDF.

Displaying the Current Page Number and Page Count

To display the current page number as part of the header and/or the footer, you can use the special {{ pageNumber }} token as a placeholder to tell PSPDFKit where to display the value on each page. Similarly, for the total page count, use {{ pageCount }}:

<p>Page {{ pageNumber }} of <strong>{{ pageCount }}</strong></p>

Customizing the Header and Footer

When specifying a header and footer, you can make use of any HTML and CSS as usual, and all styles added to the main page will affect them the same way they would regular DOM elements.

You can add images, use custom fonts, set a background, change font size, etc.

To set a gap between the header and the content, you can use regular CSS techniques, such as specifying a margin-bottom declaration to the #pspdfkit-header selector via CSS.

Similarly, you can also use CSS to set a gap between the content on each page and the footer — for instance, via the margin-top property in the #pspdfkit-footer selector.

Please note that the margins that are set to the page layout as part of the generation configuration will affect the space between the edges of the generated pages and the header and footer, respectively. Refer to our page layout guide to learn more.

Sample Templates

We have a collection of sample templates available for you to try out. Please feel free to download them and modify them as needed.

Page Header and Footer

Adding a Header

Adding a Footer

Displaying the Current Page Number and Page Count

Customizing the Header and Footer

Sample Templates