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
...
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:
| Code Block | ||
|---|---|---|
| ||
<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
...
| Code Block | ||
|---|---|---|
| ||
<style><!--
#invoice-container sethtmlpagefooter,
#invoice-container sethtmlpageheader {
display:none
}
#invoice-container htmlpagefooter,
#invoice-container htmlpageheader {
display:block;
}
--></style> |
Custom Margins
...
It is possible to define your own margins using css inside @page selector. You can read about supported rules in mPDF documentation.
...
Troubleshooting
...
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.
| Code Block | ||
|---|---|---|
| ||
<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:
| Code Block | ||
|---|---|---|
| ||
<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>
|