Skip to main content
Version: 3

Example of Header and Footers in Custom PDF Templates

Headers and Footers

The plugin ships with a number of PDF templates showing off the features of mPDF. These can be found in your PDF_EXTENDED_TEMPLATES directory.

Overview

To easily switch between custom PDF templates change the template query string parameter to the template name when viewing a PDF via your admin area.
This page has both basic and advanced header and footer template files available.

Template Name: example-header-and-footer_06.php Example URL: https://test.com/?gf_pdf=1&fid=3&lid=40&template=example-header-and-footer_06.php

Download Example PDF

Template Name: example-advanced-headers_07.php (View Source Code) Example URL: https://test.com/?gf_pdf=1&fid=3&lid=40&template=example-advanced-headers_07.php

Download Example PDF

mPDF has advanced header and footer control that allows you to have a different header/footer on the first page, alternate header/footers on odd and even pages, and display the page number, total number of pages.

Creating Headers and Footers

Headers and footers can be defined anywhere in the <body> of the document but we recommend adding them before any other HTML is outputted. mPDF uses the custom HTML elements <htmlpageheader>and <htmlpagefooter> to define PDF header and footer templates. Once defined they should be set with either the @page method or using the setter tags <sethtmlpageheader> and <sethtmlpagefooter>. We document both methods in the example templates.

Headers

Do not use a name attribute starting with html_ when defining headers or footers. This prefix is reserved.
<htmlpageheader name="MyCustomHeader"></htmlpageheader>

The <htmlpageheader> tag allows you to define a header template. Everything inside the <htmlpageheader> tag will be rendered in the header.

<htmlpageheader name="MyCustomHeader">
    <table style="border-bottom: 1px solid #000000; vertical-align: bottom; font-family: serif; font-size: 9pt; color: #000088;" width="100%">
        <tbody>
            <tr>
                <td width="50%">Title</td>
                <td style="text-align: right; font-weight: bold;" width="50%">Logo</td>
            </tr>
        </tbody>
    </table>
</htmlpageheader>

Footers

Do not use a name attribute starting with html_ when defining headers or footers. This prefix is reserved.
<htmlpagefooter name="MyCustomFooter></htmlpagefooter>

The <htmlpagefooter> tag allows you to define a footer template. Everything inside the <htmlpagefooter> tag will be rendered in the footer.

<htmlpagefooter name="MyCustomFooter">
    <table style="vertical-align: bottom; font-family: serif; font-size: 8pt; color: #000000; font-weight: bold; font-style: italic;" width="100%">
        <tbody>
            <tr>
                <td width="33%"><span style="font-weight: bold; font-style: italic;">{DATE j-m-Y}</span></td>
                <td style="font-weight: bold; font-style: italic;" align="center" width="33%">{PAGENO}/{nbpg}</td>
                <td style="text-align: right;" width="33%">My document</td>
            </tr>
        </tbody>
    </table>
</htmlpagefooter>

Assigning Headers and Footers

There are two different methods to assign headers and footers: using @pageor mPDFs custom HTML setter tags <sethtmlpageheader>and <sethtmlpagefooter>.

@page

This technique can be viewed in the example-header-and-footer_06.php template and is the preferred method. @pageis a powerful CSS selector which gives you control over the look and feel of individual pages in your PDF. This includes setting headers and footers.
<style>
    @page {
        /* ensure you append the header/footer name with 'html_' */
        header: html_MyCustomHeader; /* sets <htmlpageheader name="MyCustomHeader"> as the header */
        footer: html_MyCustomFooter; /* sets <htmlpagefooter name="MyCustomFooter"> as the footer */
    }
</style>
@pagealso has three pseudo selectors - :first, :left and :right - so you can set different headers and footers on the first page, and odd an even pages.
<style>
    /* first PDF page */
    @page :first {
        /* ensure you append the header/footer name with 'html_' */
        header: html_P1Header; /* sets <htmlpageheader name="P1Header"> as the header */
        footer: html_P1Footer; /* sets <htmlpagefooter name="P1Footer"> as the footer */
    }

    /* odd / left PDF page */
    @page :left {
        /* ensure you append the header/footer name with 'html_' */
        header: html_leftHeader; /* sets <htmlpageheader name="leftHeader"> as the header */
        footer: html_leftFooter; /* sets <htmlpagefooter name="leftFooter"> as the footer */
    }

    /* even / right PDF page */
    @page :right {
        /* ensure you append the header/footer name with 'html_' */
        header: html_rightHeader; /* sets <htmlpageheader name="rightHeader"> as the header */
        footer: html_rightFooter; /* sets <htmlpagefooter name="rightFooter"> as the footer */
    }
</style>
See the mPDF documentation for more details on @page.

HTML Setters

<sethtmlpageheader [name] [value] [show-this-page] /><sethtmlpagefooter [name] [value] [show-this-page] />

The use of the <sethtmlpageheader />or <sethtmlpagefooter /> tag will set a header/footer. If you want to ensure the header/footer is set on the current page you should use the show-this-page="1"attribute.

<sethtmlpageheader name="Header" value="on" /> <!-- Activates <htmlpageheader name="Header"> on the NEXT PDF page -->
<sethtmlpageheader name="Header" show-this-page="1" value="on" /> <!-- Activates <htmlpageheader name="Header"> on the CURRENT PDF page -->
<sethtmlpageheader value="off" /> <!-- Disables the header on the NEXT PDF page -->

<sethtmlpagefooter name="Footer" value="on" /> <!-- Activates <htmlpagefooter name="Footer"> on the NEXT PDF page -->
<sethtmlpagefooter name="Footer" show-this-page="1" value="on" /> <!-- Activates <htmlpagefooter name="Footer"> on the CURRENT PDF page -->
<sethtmlpagefooter value="off" /> <!-- Disables the footer on the NEXT PDF page -->
Headers and Footers have access to a number of reserved variables which allow it to display the current and total page names.

More Information