Jak připravit šablonu pro tisk v jazyce HTML?
Struktura souboru s šablonou
Š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:
- doc_template.html - v tomto souboru definujeme vzhled hlavičky a obsah celého dokumentu (faktura, opravný daň. doklad, proforma, ...). Soubor musí být povinně přítomen v archivu ZIP.
- doc_template_footer.html - v tomto souboru definujeme vzhled patičky dokumentu, kromě toho lze nastavit umístění a způsob stránkování dokumentu. Pokud tento soubor není v archivu, dokument se zobrazí bez patičky.
- ostatní soubory (obrázky, CSS, atd.). Přítomnost ostatních souborů je nepovinná.
Definice formátu stránky a kvalita tisku
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. |
Jak přidáme záložky a určíme kde se údaje zobrazí
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.
Tisk položek v tabulkách
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 se při generování výtisku ignoruje. Tato část kódu je určena k usnadnění tvorby šablony, kdy zobrazuje zadané údaje, nicméně není obsažena v konečném dokumentu.
Jak přidáme obrázky
Š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".
Jak přidáme čárový kód, QR kód a obrázky položek do dokumentu
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. |
Obecné tipy pro návrh šablon v jazyce HTML
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/ 
.
