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

curl https://api.pdfgate.com/v1/generate/pdf \ -X POST \ -H "Content-Type: application/json" \ -H "Authorization: Bearer YOUR_API_KEY" \ --data '{ "html": "<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id quam faucibus, iaculis nibh et, accumsan orci. Duis lobortis tortor id purus lobortis, non rutrum diam tempus. Vivamus orci eros, imperdiet quis aliquam scelerisque, vestibulum sit amet lorem. Cras quis tellus at nulla varius gravida at quis eros. Suspendisse id purus in mauris vulputate accumsan. Vivamus ac ultricies elit. Mauris sapien leo, sodales sed turpis sed, blandit consequat nulla. Maecenas suscipit ultrices ex quis feugiat.</p></div>", "header": "<div style=\"font-size:14px;padding:0 1cm;\"><h2>Header</h2></div>", "footer": "<div style=\"font-size:14px;padding:0 1cm;\"><h2>Footer</h2></div>", "margin": { "top": "2cm", "bottom": "2cm", "left": "1cm", "right": "1cm" } }' \ -o output.pdf

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 may not render in the header and footer. If you want background colors, add the following CSS rule:

• -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. This is the simplest approach because the header and footer templates don't load external resources.

Example

Fonts support

Custom fonts are not supported in header and footer templates. Only standard system fonts are supported.

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.