Kako pripravimo predlogo za tiskanje v jeziku HTML?

1.1 Struktura datoteke s predlogo

Predlogo za tiskanje dokumentov v formatu HTML oblikujemo kot skupek več datotek v kompresiranem arhivu tipa ZIP.

ZIP arhiv vsebuje naslednje datoteke:

Maksimalna dovoljena velikost za uvoz predloge je 250KB


1.2 Določitev formata strani in kvalitete izpisa

Velikost strani in druge lastnosti datotek PDF določimo znotraj datoteke doc_template.html na začetku datoteke znotraj poglavja HEAD z atributi oznake HTML2PDF. Primer:

<!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" />
    ...



Format določimo z naslednjimi atributi:

page-sizeVpišemo velikost strani npr. A4, A3, B5, Letter, ipd.
orientationVpišemo "Portrait" za pokončno postavitev strani in "Landscape" za ležeč izpis.
dpiVpišemo s kakšno ločljivostjo želimo izpis slik.
margin-bottomVpišemo odmik od spodnjega roba strani. Odmik nastavimo tako, da imamo dovolj prostora za izpis noge dokumenta.
margin-topVpišemo odmik glave in vsebine od zgornjega roba strani.
lowqualityVpišemo "1" (tudi "yes" ali "true"), če želimo datoteke PDF z manjšo velikostjo na račun nižje kvalitete izpisa slik.
grayscaleVpišemo "1", če ne želimo barvnega tiska.

1.3 Kako dodamo zaznamke in določimo kje se izpišejo podatki

Spodnji primer z zaznamki s podatki o kupcu in glavi dokumenta prikazuje kako znotraj datoteke HTML določimo kje se izpišejo podatki in določimo zaznamke v datoteki HTML:

<!DOCTYPE html>
<html>
...
<body>
    ...
    <section id="podatki-glava">
        <p id="podatki-stranka">
            <strong><data bookmark="KupecNaziv">Janez Novak</data></strong>
            <dataSection bookmark="KupecNaziv2" removeEmpty="true"><strong><br><data>ACME COMPANY d.o.o.</data></strong></dataSection>
            <dataSection bookmark="KupecUlica" removeEmpty="true"><br><data>Slepa ulica 123</data></dataSection>
            <br><data bookmark="xmlBookmarkKupecPosta">1000</data>   <data bookmark="xmlBookmarkKupecKraj">Ljubljana</data>
            <br><br><dataSection bookmark="KupecDavcnaStevilka" removeEmpty="true">ID DDV: <data>123456789</data></dataSection>
        </p>
        <p id="podatki-racun">
            <strong>RAČUN ŠT.: <data bookmark="StevilkaDokumenta">01-0001-1</data></strong>
            <br><br><data bookmark="KrajIzstavitveDokumenta">Šentilj</data>, dne: <data bookmark="DatumInCasIzstavitveDokumenta">1.4.2018 10:52</data>
            <br>Zapadlost: <data bookmark="DatumZapadlosti">15.4.2018</data>
            <br>Datum dobave: <data bookmark="DatumOpravljeneStoritve">1.4.2018</data>
            <br><br>Način plačila: <data bookmark="NacinPlacila">gotovina</data>
        </p>
    </section>
    ...


Kot je razvidno iz primera se podatki izpišejo znotraj HTML oznake data. Ime zaznamka s podatki določa atribut bookmark.

Če želimo, da se pred podatkom izpiše določeno besedilo samo v primeru prisotnosti podatka v zaznamku (npr. besedilo "ID DDV:" samo v primeru, če je na računu prisotna DDV številka), potem celoten izsek HTML vpišemo znotraj oznake dataSection, ki ji v atributu bookmark določimo na kateri zaznamek se le-ta nanaša. V primeru uporabe za več istočasnih pogojev se lahko poslužujemo vgnezdenih oznak dataSection. V temu primeru jih lahko definiramo zaporedoma (dataSection, dataSection2,...). Maksimalni nivo oz. število vgnezdenih je 5 (dataSection5).

Spodnji primer prikazuje kake se izpisuje država kupca v primeru tujega kupca/države. Podatek se bo izpisal le v koliko ta obstaja vpisan na kupcu:

...
<dataSection bookmark="KupecDrzavaSamoTujina" removeEmpty="true">
       <dataSection2 bookmark="KupecDrzava" removeEmpty="true">
               <data bookmark="KupecDrzava">Avstrija</data>
       </dataSection2>
</dataSection>
...


V dataSection lahko z atributom removeEmpty="true" določimo, da se izsek HTML znotraj dataSection izpiše samo v primeru prisotnosti podatka znotraj zaznamka na katerega se nanaša dataSection. Če podatka v zaznamku ni, potem bo celotna vsebina dataSection izpuščena iz končnega dokumenta. Na tak način lahko določene dele dokumenta HTML pogojno generiramo samo v primeru prisotnosti določenega podatka na dokumentu.

V dataSection lahko z atributom showOnValue="podatek" določimo, da se izsek HTML znotraj dataSection izpiše samo v primeru, da je vrednost podatka v bookmarku enaka vrednosti vpisani znotraj showOnValue. Na ta način lahko določene dele dokumenta HTML pogojno izpišemo samo v primeru prisotnosti točno določenega podatka na dokumentu.

Spodnji primer prikazuje kako se bo izpisal0 skupaj za plačilo z besedo, le pod pogojem, da je valuta dokumenta evro:

...
<dataSection bookmark="DenarnaValuta" showOnValue="EUR">
       <data bookmark="SkupajZaPlaciloZBesedami">stopeTdeset</data>
</dataSection>  
...

1.4 Izpis postavk v tabelah

Spodnji primer prikazuje kako oblikujemo in določimo pozicijo izpisa podatkov o postavkah dokumenta. Oznaka dataTableRow določa izsek HTML, ki se ponavlja za vsako postavko. Ob vsaki ponovitvi se oznake data napolnijo s podatki naslednje postavke dokumenta.

...
<dataTable bookmark="Postavke">
       <table>
               <tr>
                       <th>Zap. št.</th>
                       <th>Šifra artikla</th>
                       <th width="500mm">Vrsta blaga - storitve</th>
                       <th>kol</th>
                       <th>ME</th>
                       <th>cena brez DDV</th>
                       <th>pop %</th>
                       <th>Vrednost brez DDV</th>
                       <th>Vrednost z DDV</th>
               </tr>
               <dataTableRow>
                       <tr>
                               <td><data bookmark="PostavkePozicija">1</data></td>
                               <td><data bookmark="PostavkeSifraArtikla">12334</data></td>
                               <td><data bookmark="PostavkeOpis">Tu je opis prvega artikla</data></td>
                               <td><data bookmark="PostavkeKolicina">9</data></td>
                               <td><data bookmark="PostavkeEnotaMere">kos</data></td>
                               <td><data bookmark="PostavkeCenaZDDV">104,576</data></td>
                               <td><data bookmark="PostavkePopust">45</data></td>
                               <td><data bookmark="PostavkeZnesekBrezDDV">194,392</data></td>
                               <td><data bookmark="PostavkeZnesekZDDV">181,753</data></td>
                       </tr>
               </dataTableRow>
               <dataSample>
                       <tr>
                               <td>2</td>
                               <td>01085CA0</td>
                               <td>Drugi artikel</td>
                               <td>10</td>
                               <td>kos</td>
                               <td>114,162</td>
                               <td>19</td>
                               <td>193,687</td>
                               <td>150,471</td>
                       </tr>
                       <tr>
                               <td>3</td>
                               <td>E282A4A1</td>
                               <td>Zadnji artikel v tabeli</td>
                               <td>5</td>
                               <td>kos</td>
                               <td>155,450</td>
                               <td>11</td>
                               <td>131,949</td>
                               <td>100,868</td>
                       </tr>
               </dataSample>
       </table>
</dataTable>
...


Na primeru je razvidna tudi oznaka dataSample, ki jo uporabljamo med oblikovanjem HTML dokumenta. Celoten odsek kode znotraj oznake dataSample se med generiranjem izpisa ignorira. Ta koda je namenjena samo lažjemu oblikovanju predloge in ne bo vključena v končni dokument.

1.5 Kako vključimo slike

V predlogo lahko vključimo poljubno število slik, ki jih uporabimo za logotipe ali predtiskane podpise na dokumentih. Slike dodajamo z uporabo HTML oznake img in jih preko atributa src referenciramo preko relativne lokacije glede na lokacijo datoteke doc_template.html. Slike vključimo v arhiv ZIP kot ločene datoteke ali pa jih zakodiramo v base64 in dodamo na način "inline" znotraj datoteke HTML.

V kolikor uporabljate slike v ločenih datotekah (PNG, JPEG, GIF), potem bodo le-te vključene samo v izpis dokumenta v formatu PDF. Če želite dokumente izpisovati kar direktno iz brskalnika z uporabo formata HTML, potem morajo biti datoteke vključene v HTML na način "embedded base64 data".

1.6 Kako vključimo izpis črtnih kod, kod QR in slik artiklov na dokument

Slike za katere obstaja zaznamek lahko v dokument vključimo z uporabo običajne HTML oznake img, kjer ne namesto atributa src uporabimo kar atribut bookmark in v njem navedemo ime zaznamka s sliko. Uporabo zaznamkov za slike je razvidna iz sledečega praktičnega primera, ki prikazuje pogojni izpis podatkov in kode QR za davčno potrjevanje računov:

  ...
   <dataSection bookmark="DokumentZOI" removeEmpty="true">
      <div id="code">
          EOR: <data bookmark="DokumentEOR">0868b4c0-4e21-4083-9764-24fdc26c0917</data><br> ZOI: <data bookmark="DokumentZOI">0b9134fd98dd37514235652373b46150</data>
      </div>
      <div id="barcode">
         <img bookmark="DokumentZOIQR">
      </div>
   </dataSection>
   ...


Možnost imamo določene paranetre ob določenih pogojih skriti in prikazati, ko so le ti izpolnjeni ali enaki 0 - primer DDV stopnja, osnova in znesek:

  ...
      <dataSection bookmark="OsnovaDDV1" removeEmptyOrZeroValue="true">
         <tr>
            <td colspan="6">Osnova za DDV 9,5%:</td>   
            <td></td>  
            <td><data bookmark="OsnovaDDV1">30</data></td>     
         </tr>
         <tr>
             <td colspan="6">Znesek 9,5% DDV:</td>
             <td></td>
             <td><data bookmark="ZnesekDDV1">125</data></td>   
         </tr>
      </dataSection>
   ...


Za seznam možnih zaznamkov preberite poglavje s seznamom vseh zaznamkov ali za pomoč kontaktirajte tehnično podporo.

V predlogah narejenih v jeziku HTML lahko vsak zaznamek uporabite poljubno krat.


1.7 Splošni napotki za oblikovanje predlog v jeziku HTML

Pri oblikovanju predlog v jeziku HTML se ravnajte v skladu s smernicami za oblikovanje dokumentov HTML za tisk. Namesto relativnega pozicioniranja lahko uporabljate absolutno pozicioniranje in mersko enoto mm (milimeter). Za zahtevne predloge priporočamo, da delo prepustite profesionalcem.

Več napotkov za oblikovanje dokumentov HTML za izpis na tiskalniku boste našli na internetu, npr. https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/.

 

---
© E-RAČUNI d.o.o. 2003-2024