Add headers and footers
With webPDF you can add a header and footer when converting an HTML document with the converter web service.
In the following we will show you step by step how to apply them via the webPDF portal.
Predefined classes
A div wrapper is inserted around the header and footer respectively, which brings standard formatting with it. In the following examples we reset these specifically. You can find more information about templating here.
The following variables can be used in each template file:
| Variable | Description |
|---|---|
| ${html.pageNumber} | Page number |
| ${html.totalPages} | Total number of pages |
| ${html.title} | Page title |
Preparing the files
The template files for header or footer can be passed either as HTML sections or even as complete HTML files. CSS definitions only have an effect on their own file. For example, a defined style in the footer has no effect on the header.
Header
For the header, we take an HTML file with address line in the upper right corner, just like a letterhead. We can position and design the rest of the document with CSS as usual.
Note that there is a predefined element with ID #header. This element acts like a div wrapper around the entire header content and brings
default formatting with it which can be reset.
In our example we specify the images as base64 content. Of course, these can also be obtained from external urls. Please make sure that the used server has access to the resource.
Footer
We can position and design the footer as usual via CSS. Special features here are again with the predefined ID #footer. This element
acts also like a div wrapper around entire footer content and brings standard formatting, which can be reset.
To provide automatic page numbering we use the variables $\{html.pageNumber\} and $\{html.totalPages\} in the example. Doing this webPDF
inserts the page number and total number of pages.
Content
As content, we simply set a lot of text paragraphs to create a text overflow to the next page. Otherwise, there are no special features.
Usage in the portal
Dialog settings
In the conversion dialog itself the option Execute HTML as code for conversion must be activated. After selecting header and footer in the respective tab, the most important thing is to choose the correct margins. Headers and footers have no influence on the positioning of the content and are not themselves affected by the page margins. This means we have to choose the page margins so that the content area has enough spacing up and down.
Usage
Limitations
Conversion with header and footer comes with several limitations, which are described below.
Spacing and visibility
CSS definitions for headers and footers have no influence on each other or the content and vice versa. The page content is always displayed on top of everything else. A margin must be selected via the page margins that prevents content from blending.
Styling
CSS definitions in headers and footers do not include the full capabilities of CSS. The following known properties are not applied:
BackgroundMask