Vorlagenblöcke - Beispiele - Engine Weasy
In PDF-Vorlagen können Blöcke (Vorlagenabschnitte) mit festen Informationen aufgenommen werden. Denken Sie an eine Fußzeile (Footer) mit beispielsweise Seitenzahlen oder eine Kopfzeile (Header). Nachstehend finden Sie Beispiele für solche Blöcke.
Falls es notwendig ist, einen Head- oder CSS-Block einzustellen: Der Inhalt der "head"- und "css"-Blöcke hat selbst einen vollständigen HTML-Aufbau, der Inhalt des <head>-Containers wird gestrippt und kommt innerhalb der <head>-Tags des neuen Body-HTML und muss dabei valide sein.
Speziell für Weasyprint: Die erweiterten Optionen "Header" und "Footer" werden einmalig vor und hinter das HTML gesetzt. Für einen wiederkehrenden Header und Footer muss spezielles CSS verwendet werden.
Der Header und Footer müssen mit <!DOCTYPE html> beginnen
Header
Ein Header mit Logo:
Die Verwendung von beispielsweise 35 ergibt meist einen gut lesbaren 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>
Wiederkehrender Header + Footer mit Seitennummerierung
Ein Footer mit Seitennummerierung:
Die Verwendung von beispielsweise 35 ergibt meist einen gut lesbaren 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>
Und verwenden Sie diesen Code im Header
<header>
My Recurring PDF Header
</header>
CSS
Ein Block mit 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>
Diese Seite basiert auf der Engine WeasyPrint
