Šablonu pro tisk dokumentů ve formátu HTML tvoříme jako sbírku více souborů v komprimovaném archivu typu ZIP.
ZIP archiv obsahuje následující soubory:
Velikost stránky a ostatní vlastnosti souboru PDF jsou definovány na začátku souboru doc_template.html, v sekci HEAD s atributy tagu HTML2PDF. Např.:
<!DOCTYPE html>
<html>
<head>
<html2pdf page-size="A4" orientation="Portrait" dpi="300" margin-bottom="30mm" margin-top="10mm" lowquality="yes" grayscale="no" zoom="0" disable-smart-shrinking="0" />
<meta charset="utf-8" />
...
Formát definujeme následujícími atributy:
page-size | Uvedeme velikost stránky např. A4, A3, B5, Letter, atd. |
orientation | Uvedeme "Portrait" pro orientaci stránky na výšku, nebo "Landscape" na šířku. |
dpi | Uvedeme v jakém rozlišení chceme tisknout obrázky. |
margin-bottom | Uvedeme vzdálenost od spodního okraje stránky. Vzdálenost nastavíme tak, abychom měli dostatek místa pro patičku dokumentu. |
margin-top | Uvedeme vzdálenost hlavičky a obsahu od horního okraje stránky. |
lowquality | Uvedeme "1" (případně "yes" nebo "true"), pokud chceme výsledný soubor PDF menší s horší kvalitou obrázků na dokumentu (pro potřeby např. zasílání emailem). |
grayscale | Uvedeme "1", pokud nechceme barevný tisk. |
Následující příklad se záložkami s údaji zákazníka ukazuje, jak uvnitř souboru HTML nadefinujeme jednotlivé záložky a kde se údaje zobrazí:
<!DOCTYPE html>
<html>
...
<body>
...
<section id="data-header">
<p id="data-buyer">
<strong><data bookmark="ZakaznikJmeno">ACME COMPANY s.r.o.</data></strong>
<dataSection bookmark="ZakaznikUlice" removeEmpty="true"><br><data>Slepá ulica 123</data></dataSection>
<br><data bookmark="ZakaznikPscMesto">60204</data> <data bookmark="ZakaznikMesto">Brno</data>
<br><br><dataSection bookmark="ZakaznikIco" removeEmpty="true">IČO: <data>324234</data></dataSection>
</p>
</section>
...
Jak je vidět z příkladu, údaje se definují uvnitř HTML tagu data. Název záložky s údaji je zadán atributem bookmark.
Chceme-li, aby se text zobrazoval pouze v případě, pokud existuje/je přítomen související údaj (např. text "DIČ:" jen, když faktura obsahuje údaje o DIČ subjektu), pak je celá sekce HTML uvozena uvnitř tagem dataSection, kde v atributu bookmark uvedeme, na kterou záložku se odkazovat. V dataSection můžeme pomocí atributu removeEmpty="true" říct, zda se celá sekce HTML uvnitř dataSection zobrazí pouze v případě existence údajů v záložce dataSection. Pokud v záložce nejsou žádné údaje, celý obsah dataSection bude z konečného dokumentu vynechán. Tímto způsobem lze generovat jen některé části dokumentu HTML, které obsahují specifické údaje na faktuře.
Níže uvedený příklad, ukazuje jak tvoříme a definujeme údaje o položkách dokumentu. Tag dataTableRow určuje sekci HTML, která se opakuje pro každou položku. Při každém opakování jsou tagy data naplněny údaji následné položky dokumentu.
...
<dataTable bookmark="Polozky">
<table class="">
<tr class="bb-light t-s">
<th>Označení dodávky</th>
<th class="t-r">Množství</th>
<th class="t-r">J. cena</th>
<th class="t-r">Sleva</th>
<th class="t-r">Cena</th>
<th class="t-r">%DPH</th>
<th class="t-r">DPH</th>
<th class="t-r">Kč Celkem</th>
</tr>
<dataTableRow>
<tr class="bt-light bb-light">
<td><data bookmark="PolozkyNazevProduktu">Fakturujeme Vám</data></td>
<td class="t-r"><data bookmark="PolozkyMnozstviBezDesetM">1</data></td>
<td class="t-r"><data bookmark="PolozkyCenaBezDphZaMj"></data>1 300,00</td>
<td class="t-r"><data bookmark="PolozkySleva">5</data></td>
<td class="t-r"><data bookmark="PolozkyCelkoveHodnotaSlevyBezDph"></data>1 300,00</td>
<td class="t-r"><data bookmark="PolozkySazbaDph"></data>21%</td>
<td class="t-r"><data bookmark="PolozkyCastkaDphDomaciMena"></data>273,00</td>
<td class="t-r"><data bookmark="PolozkyCenaVcetDph">1 573,00</td>
</tr>
</dataTableRow>
<dataSample>
<tr class="bt-light">
<td colspan="7">Fakturujemo vam ...</td>
<td class="t-r"> </td>
</tr>
<tr class="bb-light">
<td> </td>
<td class="t-r">1</td>
<td class="t-r">1 300,00</td>
<td class="t-r"> </td>
<td class="t-r">1 300,00</td>
<td class="t-r">21%</td>
<td class="t-r">273,00</td>
<td class="t-r">1 573,00</td>
</tr>
</dataSample>
</table>
</dataTable>
...
Na příkladu je také vidět tag dataSample, který používáme při vytváření dokumentu HTML. Celá část kódu uvnitř tagu
Šablona může obsahovat libovolný počet obrázků, např. loga, předtištěné podpisy na dokumentech, apod. Obrázky přidáme pomocí HTML tagu img a přes atribut src se odkážeme na relativní adresu obrázku, vzhledem k umístění souboru doc_template.html. Obrázky vložíme do archivu ZIP jako samostatné soubory nebo je zakódujeme do formátu base64 a vložíme v režimu "inline" dovnitř souboru HTML.
Pokud použijete obrázky v samostatných souborech (PNG, JPEG, GIF), pak budou obsaženy pouze v dokumentech PDF. Chcete-li tisknout přímo z prohlížeče, pomocí formátu HTML, pak musejí být soubory obsaženy v HTML šabloně způsobem "embedded base64 data".
Obrázky, které mají k dispozici záložku, mohou být v dokumentu vložený pomocí běžného HTML tagu img, kde namísto atributu src použijeme atribut bookmark a v něm uveden název záložky s obrázkem. Použití záložek pro obrázky je názorně zobrazeno v praktickém příkladu níže, kde je tisk údajů a QR kódu podmíněn přítomností kódu BKP (doklad byl elektronický zaevidován do systému Finanční správy):
...
<dataSection bookmark="EetBkpKod" removeEmpty="true">
<div id="code">
FIK: <data bookmark="EetFikKod">766f31ca-97bb-4517-b456-f2bc3df929aa-ff</data><br> BKP: <data bookmark="EetBkpKod">3a644608-443de1e5-ca26deae-4e0fbfe8-6b17d4fb</data>
</div>
<div id="barcode">
<img bookmark="DokumentBKPQR">
</div>
</dataSection>
...
Chcete-li zobrazit seznam možných záložek, přejděte na seznam vše záložek, případně kontaktujte technickou podporu.
V šablonách vytvořených v jazyce HTML můžete každou záložku použít vícekrát. |
Při vytváření šablon HTML postupujte dle pokynů tvorby dokumentů HTML pro tisk. Namísto relativního pozicování můžete použít absolutní pozicování a měrnou jednotku mm (milimeter). Pro náročné návrhy šablon doporučujeme nechat práci odborníkům.
Více informací jak vytvářet dokumenty HTML pro tisk naleznete na webu, např. https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/.
---