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
template query string parameter to the template name when viewing a PDF via your admin area.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
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
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
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
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 theexample-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 -->