Template blokken - Voorbeelden - Engine Weasy
In PDF templates kunnen blokken (template secties) met vaste informatie opgenomen worden. Denk aan een voettekst (footer) met bijvoorbeeld paginanummers of een koptekst (header). Onderstaand staan voorbeelden van dergelijke blokken.
Als het nodig is om een head of css blok in te stellen, de inhoud van de "head" en "css" blokken hebben zelf een volledige html opbouw, de inhoud van de <head> container wordt gestript en komt binnen de <head> tags van de nieuwe body html en moet wel valide zijn.
Specifiek voor Weasyprint: de geavanceerde optie "Header" en "Footer" worden éénmalig voor en achter de HTML gezet. Voor terugkerende header en footer dient gebruik gemaakt te worden van speciale CSS.
De header en footer moeten beginnen met de <!DOCTYPE html>
Header
Een header met logo:
Gebruik van bijvoorbeeld 35 levert meestal een duidelijk leesbare 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>
Terugkerende Header + Footer met pagina nummering
Een footer met paginanummering:
Gebruik van bijvoorbeeld 35 levert meestal een duidelijk leesbare footer.
<!-- Combineer de CSS met deze 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>
En gebruik deze code in de header
<header>
My Recurring PDF Header
</header>
CSS
Een blok met CSS:
<!-- voorbeeld CSS Styles dienen altijd met een style tag te starten en afgesloten te worden. -->
<style>
hr {
color: sienna;
}
p {
margin-left: 20px;
}
body {
background-image: url("images/back40.gif");
}
</style>
Deze pagina is gebaseerd op engine WeasyPrint
