Gravity PDFHeaders and Footers Example – Gravity PDF Development
Introduction
Headers and footers are a powerful feature of the PDF rendering software, mPDF. They aren't just limited to every page either, you have granular control over which pages your headers and footers display on.
Defining Headers/Footers
The first thing you need to do is define a header/footer in your PDF template, then you tell the software when to display it. The two tags to define headers/footers are <htmlpageheader name=""> and <htmlpagefooter name="">.
The headers/footers HTML tags can be included anywhere inside your template but we recommend including it at the beginning of your HTML section (after the styles).
Headers
The <htmlpageheader> tag allows you to define a header template and everything inside the tag will be rendered at the top of your page. The tag has one required attribute name which acts as an ID for your header. Just ensure you don't use a name that begins with html_, as that prefix is reserved.
Footers
The <htmlpagefooter> tag allows you to define a footer template and everything inside the tag will be rendered at the bottom of your page. The tag has one required attribute name which acts as an ID for your footer. Just ensure you don't use a name that begins with html_, as that prefix is reserved.
Displaying Headers/Footers
There are two different methods to assign headers and footers:
- Using the special CSS selector
@page - Using mPDF's custom HTML setter tags
<sethtmlpageheader>and<sethtmlpagefooter>
Setting your own header or footer in your PDF template will override the core header and footer fields.
@page
Using @page is the preferred way to set a header or footer in the PDF as it has less quirks and keeps your HTML mark-up cleaner.
You can also apply headers and footers to the first page of your document using the pseudo selector :first.
You can get more specific with named @page selectors but we'll discuss those in the <pagebreak> section.
Inline HTML
The use of the <sethtmlpageheader /> or <sethtmlpagefooter /> tag will set a header/footer on the current page in the document. While using @page is preferred, these tags do have their usefulness. Because there's currently no @page :last pseudo selector we can use them at the end of our PDF template to display a header/footer on the very last page.
The extra attribute show-this-page in the header tag is required because the PDF software has already finished writing the page header. This tells it to go back and set our new header, otherwise it will wait until the next page. You can also turn headers/footers off for specific pages:
Reserved Variables
Header and Footers have access to the following reserved variables that can be used to display the current page number and the total page number:
{PAGENO}– Will be replaced by the current page number.{nb}– Will return the total number of pages in the PDF document
Samples and Further Reading
We've put together two sample PDF templates showing off the two header and footer methods we discussed above:
For more information about the methods discussed we recommend reviewing the mPDF documentation: