Template blocks - Examples - Engine Weasy
Blocks (template sections) with fixed information can be included in PDF templates. Think of a footer with, for example, page numbers or a header. Examples of such blocks are shown below.
If a head or CSS block needs to be set, the content of the "head" and "CSS" blocks themselves have a complete HTML structure. The content of the <head> container is stripped and placed within the <head> tags of the new body HTML and must be valid.
Specific to Weasyprint: the advanced options "Header" and "Footer" are placed once before and after the HTML. Special CSS must be used for recurring headers and footers.
The header and footer must begin with <!DOCTYPE html>
Header
A header with a logo:
Using a margin of 35, for example, usually produces a clearly readable header.
<!DOCTYPE html> <HTML> <HEAD> </HEAD> <BODY style="margin: 0 0 0 0; border:0;"> <table border="0" width="100%"> <tbody> <tr> <td> <div style="margin-top:0; margin-bottom:0px;"><img alt="" src="https://klant.i-reserve.net/user/media/klant/images/BWP%20LOGO%202019/BWP_LOGO.jpg" style="width: 1260px;" /></div> </td> </tr> </tbody> </table> </BODY> </HTML>
Recurring Header + Footer with page numbering
A footer with page numbering:
Using 35, for example, usually results in a clearly readable footer.
<!-- Combine the CSS with this extra code -->
<style>
@page {
@top-center {
content: element(header);
}
@bottom-center {
content: "Page " counter(page) " of " counter(pages);
font-size: 12px;
font-family: sans-serif;
}
}
header {
position: running(header);
text-align: center;
font-weight: bold;
font-size: 14px;
}
</style>
And use this code in the header
<header> My Recurring PDF Header </header>
CSS
A block with CSS:
<!-- example CSS styles should always start and end with a style tag. -->
<style>
hr {
color: sienna;
}
p {
margin-left: 20px;
}
body {
background-image: url("images/back40.gif");
}
</style>
This page is based on the engine WeasyPrint
