How to Add Headers and Footers to PDFs

Overview

In this guide, we’ll walk through how to add headers and footers to PDFs when converting HTML to PDF. We’ll cover the built-in dynamic classes, basic styling, background colors, and how to include images using Base64.

Header and footer example

In this example, we’ll use the header, footer, and margin options of the HTML to PDF API. These are the minimum options required to generate a PDF with headers and footers using PDFGate. You can explore additional options in the HTML to PDF docs.

• header: The HTML template for the header.
• footer: The HTML template for the footer.
• margin: Top and bottom margins should be added.

CURL

NODE.JS

Dynamic classes

Inside your header and footer HTML templates you can use the following CSS classes and they will be filled automatically:

• .date: The print date, formatted as a string.
• .title: The document title.
• .url: The document URL / location.
• .pageNumber: The current page number.
• .totalPages: The total number of pages.

Example

Enable background colors

By default, background colors are not rendered. However, you can use the following CSS rule to enable them:

• -webkit-print-color-adjust: exact;

Example

Add images using Base64

If you want to include a logo or an icon, you can use a Base64 image because external resources cannot load in the header and footer templates.

Example

Fonts support

Custom fonts are not supported. You can use only standard system fonts.

HTML format

The header and footer templates can be provided as HTML fragments or as a full HTML document. In most cases, a simple fragment is enough.

Margins

When using headers or footers, you must define the corresponding page margins. If a header is provided without margin.top, or a footer without margin.bottom, the API will return an error. Make sure the margins are large enough so the content is not clipped.