Hlavička

Zde vidíme kód pro vytvoření hlavičky příjemky:

<style>
table.header {font-family: Arial;
  font-size: 12pt;
  width: 100%;
  margin-left: 1cm;
  margin-right: 1cm;
  font-style: bold;
  border-bottom: 2pt solid black;
  margin-bottom: 0;
}

td.docName {
  text-align: left;
}

td.docNumber {
  text-align: right;
}
</style>

<table class='header'>
  <td class='docName' colspan="2">
    <b>Příjemka</b>
  </td>
  <td class='docNumber'>
    <b>{{@dict;Ev. číslo}}: {{data.head.docNumber}}</b>
  </td>
</table>

Styl musíme pro hlavičku nadefinovat zde, ne v odděleném souboru.

Do patičky je možné si přidat libovolné informace. Zde je příklad kódu pro jednoduchou tabulku s názvem dokladu a s jeho číslem:

<table class='header'>
  <td class='docName' colspan="2">
    <b>Příjemka</b>
  </td>
  <td class='docNumber'>
    <b>{ {@dict;Ev. číslo}}: {{data.head.docNumber}}</b>
  </td>
</table>

V příkladu máme dvě buňky. První bude zarovnaná nalevo a druhá napravo. Tím docílíme toho, že vlevo se nám v patičce objeví název dokladu a napravo jeho evidenční číslo.

Pro vytvoření patičky využijeme souboru options.json, kdy do jeho kódu musíme vepsat odsazení shora, aby se nám celá patička zobrazila (odsazení se bude lišit podle toho, jak bude patička vysoká).

{
 "marginLeft": "1cm",
 "marginRight": "1cm",
 "marginTop": "1.5cm"
}

Patička

Patičku uděláme podobně. Do options.json při­dáme odsazení zdola:

{
 "marginLeft": "1cm",
 "marginRight": "1cm",
 "marginTop": "1.5cm",
 "marginBottom": "2cm"
}

Styl musíme opět napsat na začátek kódu.

<style>
table.footer{
  font-family: Arial;
  font-size: 6pt;
  width: 100%;
  margin-left: 1cm;
  margin-right: 1cm;
}

td.logo {text-align: left;}

td.page {text-align: right;}

img.logo {height: 1.10em; width: 5em; position: relative; bottom: -0.3em;}
</style>

Kód pro patičku může vypadat například takto:

<table class='footer'>
  <td class='logo'>
  	Vytištěno aplikací <img class="logo" src="data:image/svg+xml;base64,..." />
  </td>
  <td class='page'>
  	Strana <span class="pageNumber"></span> z <span class="totalPages"></span>
  </td>
</table>

Použití loga a ikon

Pokud chceme použít loga nebo ikona v hlavičce nebo patičce, musíme si vygenerovat kód, který vložíme do řádku pro vložení obrázku.

Pro vygenerování použijeme generátor, který si najdeme v prohlížeči (konvertujeme obrázek do css v base64) a do něj vložíme naše logo/ikonu (např. v .svg). Po vygenerování si necháme zobrazit kód pro obrázek a zkopírujeme ten, který budeme moci použít v <img> elementu. Bude ve tvaru:

data:image/svg+xml;base64,...

Do patičky nebo hlavičky ho vložíme řádkem:

<img class="logo" src="data:image/svg+xml;base64,..." />

Logo je použito v příkladu u patičky výše.