Invoicing: Set custom header/footer in PDF invoice template

Owned by HostBill
Last updated: Oct 26, 2020
2 min read

HostBill uses versatile mPDF library to generate PDF documents, as such it allows you to control generated document features through custom html/css tags. You can read more about it at mPDF Online Manual

Feature Description

When customizing HTML template that is used to render PDF/HTML invoice in HostBill, you can make use of custom tags to render footer/header on every PDF page.
Headers and footers can be defined anywhere in the source of the document but we recommend adding header at the top and footer at very bottom of document structure.
PDF library used by HostBill allows use of the custom HTML elements <htmlpageheader> and <htmlpagefooter> to define PDF header and footer templates.
Once defined they should be called by CSS @page attribute 


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



Example below will render html footer on all (both odd and even) PDF pages:

<htmlpagefooter name="myCustomFooter">This will be rendered at the very bottom of every PDF page</htmlpagefooter>
<style>
@page {
 footer: html_myCustomFooter;
}
</style>

 

Using htmlpagehader and htmlpagefooter in HTML version of invoice

Since HostBill uses same template to render invoice, you should add some CSS code to properly display those elements. 

Simplest code to achieve that:

<style><!--
#invoice-container sethtmlpagefooter,
#invoice-container sethtmlpageheader {
display:none
}
#invoice-container  htmlpagefooter,
#invoice-container  htmlpageheader {
display:block;
}
--></style>


Page Numeration

In document headers & footers it is possible to render page number and total number of pages by the use of following tags:

  • {PAGENO} - to show current page on document
  • {nbpg} - to show total number of pages in a document


Custom Margins 

It is possible to define your own margins using css inside @page selector. You can read about supported rules in mPDF documentation. 

We add two additional options related to header and footer, margin-top-auto and margin-bottom-auto with can accept one of those values:

  • pad - value for margin is used to set a fixed distance in mm (padding)-
  • stretch - value of the margin sets a minimum distance in mm between the edge of the page and the main text, which expands if header/footer is too large to fit.


<style>
@page {
   margin-bottom: 10.6mm; 
   margin-top: 10.6mm;
   margin-bottom-auto: stretch;
}
</style>

Troubleshooting

If sethtmlpagefooter/header method is working for you only on first page of your PDF invoice, try adding following CSS code to your invoice html source (where myheader and myfooter are names of your footer/header set in "htmlpageheader/footer" elements:

<style>
@page {
  size: auto;
  odd-header-name: html_myheader;
  even-header-name: html_myheader;
  odd-footer-name: html_myfooter;
  even-footer-name: html_myfooter;

}
</style>