Skip to main content

The footer from my HTML file isn't showing up in the converted PDF

Updated over a month ago

You’ve added a footer to your PDF but it doesn’t appear when the document is generated. This usually happens because the footer (or header) doesn't fit within the space defined by the PDF's margins, or the font size wasn’t explicitly set.

Why This Happens

The PDF rendering engine only displays content within the printable area defined by your margins. If your header or footer content is too large or your margins are too small, parts of the content—like the footer—can be cut off or hidden. Additionally, if a font size is not set explicitly, the default rendering may result in the text not appearing properly.

How to Fix the Footer Not Showing

You’ll need to ensure two things:

1. Set Proper Margins

Ensure your top and bottom margins allow space for the header and footer content.

Example:

"margins": "40px 0px 40px 0px"

This sets 40px of space at the top and bottom, which is typically enough for most header/footer text.

2. Explicitly Define Font Size

Your footer and header must include a clear font size in the HTML.

Example Footer:

<footer>
<div style='width: 100%; font-size:10px; text-align: right; padding-right:20px'>
Page <span class='pageNumber'></span> of <span class='totalPages'></span>.
</div>
</footer>

Example Header:

<header>
<span style='font-size:12px !important; color:#808080; padding-left:20px'>
<strong>bold text</strong> bla bla
</span>
</header>

Helpful Tips

  • Use sufficient top/bottom margin space (e.g., 40px or more).

  • Always define font size in the HTML to prevent rendering issues.

  • Test your layout with small PDFs first to verify formatting.

Did this answer your question?