Domů 
Předchozí stránka 
Následující stránka 
Historie změn 
 Kopírovat URL stránky 
 
Vytisknout tuto stránkuVytisknout tuto stránku  
Nastavení  >  Nastavení společnosti  >  Základní nastavení  >  Nastavení tisku dokladů  >  Šablony pro tisk  >  Jak připravit šablonu p...

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:

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-sizeUvedeme velikost stránky např. A4, A3, B5, Letter, atd.
orientationUvedeme "Portrait" pro orientaci stránky na výšku, nebo "Landscape" na šířku.
dpiUvedeme v jakém rozlišení chceme tisknout obrázky.
margin-bottomUvedeme vzdálenost od spodního okraje stránky. Vzdálenost nastavíme tak, abychom měli dostatek místa pro patičku dokumentu.
margin-topUvedeme vzdálenost hlavičky a obsahu od horního okraje stránky.
lowqualityUvedeme "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).
grayscaleUvedeme "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/ https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/.

---
Datum a čas poslední úpravy 10.07.2019 14:47:46
© Eurofaktura s.r.o. 2003-2020