Create individual headers / footers for the report - ServiceZoid

In this blog post we describe in some detail how to create a customized header / footer for the Report created. This allows you to integrate your own logo, among other things.

Content

For the header, we recommend the logo, the address of your company and some services. As long as you still If you have not specified an individual header, your address will already be generated in the PDF. But this will go through replaces its own header. In the footer you can indicate what you want.

Your logo should be stored directly in the HTML as Base64. We recommend the logo at a height of 200px down to scale. The header has a height of 100px and the double resolution makes the logo always sharply represented.

Then use the following website base64-image.de to convert your logo into a Base64 text. After the logo has been uploaded click on “copy image” to get the Base64 text of the logo.

HTML

Then create the HTML for the headers / footers in a separate file. Copy the Base64 text of your logo Into the “src” attribute of the “img” tag.

Here is an example of a 3-column HTML layout for the header:

<div style="display: flex; font-size: 10px;">
<div style="flex: 1">
<ul style="padding-left: 20px;">
<li>
<span style="font-weight: bold"> [Service 1]</span><br>
<span>[Sub service 1]</span>
</li>
<li>
<span style="font-weight: bold">[Service 2]</span><br>
<span>[Sub service 2]</span>
</li>
<li>
<span style="font-weight: bold">[Service 3]</span><br>
<span>[Sub service 3]</span>
</li>
</ul>
</div>
<div style="flex: 1; text-align: center">
<img style="height: 100px;" src="data:image/png;base64, ...">
</div>
<div style="text-align: right; flex: 1">
<span style="font-weight: bold">[owner]</span><br>
[street]<br>
[postalcode] [ORT]<br>
[T] [phone]<br>
[F] [fax]<br>
[email]<br>
[website]<br>
[tax-id]
</div>
</div>

Insert

To insert the new header / footer, the HTML snippets only need to be entered in the two fields in the settings copied by ServiceZoid. Then save and the next reports will be with your new header / footer shown.

Assistance

We are aware that, despite these instructions, the creation of individual headers / footers is not for many is quite trivial. Your web design agency will be able to help you with the creation.