Kako napraviti predložak za ispis u jeziku HTML?
1.1 Struktura datoteke s predloškom
Predložak za ispis dokumenata u formatu HTML oblikujemo kao zbir više datoteka u kompresiranom arhivu tipa ZIP.
ZIP arhiva sadrži sljedeće datoteke:
- doc_template.html - u ovoj datoteci zadajemo izgled zaglavlja (header) i cijelog sadržaja dokumenta (račun, predračun,...). Datoteka mora biti obavezno prisutna u arhivu ZIP.
- doc_template_footer.html - u ovoj datoteci zadajemo izgled podnožja dokumenta (footer). Osim podnožja, zadati možemo i poziciju i način numeriranja stranica. Ukoliko datoteka nije sadržana u arhivu, dokumenti će se ispisati bez podnožja.
- ostale datoteke (slike, CSS, itd.) - prisutnost drugih datoteka je opcijska.
 | Maksimalna dopuštena veličina zip datoteke je 250kb. |
1.2 Definiranje formata stranice i kvalitete ispisa
Veličinu stranice i druga svojstva PDF datoteke odredimo unutar datoteke doc_template.html na početku datoteke unutar poglavlja HEAD s atributima oznake HTML2PDF. Primjer:
<!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 zadajemo sa sljedećim atributima:
| page-size | Upišemo veličinu stranice npr. A4, A3, B5, Letter, itd. |
| orientation | Upišemo "Portrait" za portretni ispis odnosno "Landscape" za pejzažni ispis. |
| dpi | Upišemo rezoluciju za ispis slika. |
| margin-bottom | Upišemo razmak (odstupanje) od donjeg ruba stranice. Razmak zadajemo tako da ostane dovoljno prostora za ispis podnožja dokumenta. |
| margin-top | Upišemo razmak zaglavlja i sadržaja od gornjeg ruba stranice. |
| margin-left | Upišemo razmak od lijevog ruba stranice. |
| margin-right | Upišemo razmak od desnog ruba stranice. |
| lowquality | Upišemo "1" (također "yes" ili "true"), ako želimo PDF datoteku manje veličine, na račun manje kvalitete ispisa slika. |
| grayscale | Upišemo "1", ako ne želimo ispis u boji. |
1.3 Kako dodati bookmarke i zadati poziciju za ispis podataka
Donji primjer s bookmarkima za podatke o kupcu i zaglavlje dokumenta prikazuje kako unutar datoteke HTML zadajemo poziciju za ispis podataka i dodajemo bookmarke u datoteci HTML:
<!DOCTYPE html>
<html>
...
<body>
...
<section id="podaci-glava">
<p id="podaci-stranka">
<strong><data bookmark="KupacNaziv">Ivan Horvat</data></strong>
<dataSection bookmark="KupacNaziv2" removeEmpty="true"><strong><br><data>Tvrtka d.o.o.</data></strong></dataSection>
<dataSection bookmark="KupacUlica" removeEmpty="true"><br><data>Zagrebačka 32</data></dataSection>
<br><data bookmark="xmlBookmarkKupecPosta">10000</data>
<data bookmark="xmlBookmarkKupecKraj">Zagreb</data>
<br><br><dataSection bookmark="KupacOibIliPdvIDBroj" removeEmpty="true">OIB / PDV ID broj: <data>123456789</data></dataSection>
</p>
<p id="podaci-racun">
<strong>Račun br.: <data bookmark="BrojDokumenta">01-0001-1</data></strong>
<br><br><data bookmark="MjestoIzdavanjaDokumenata">Zagreb</data>, dana:
<data bookmark="DatumIVrijemeIzdavanjaRacuna">13/03/2017 10:52</data>
<br>Dospijeće: <data bookmark="DatumDospijeca">27/03/2017</data>
<br>Datum isporuke: <data bookmark="DatumPrometa">01/03/2017</data>
<br><br>Način plaćanja: <data bookmark="NacinPlacanja">gotovina</data>
<br>TRR: <data bookmark="TRR">12345-67890</data>
<br>Poziv na broj: <data bookmark="PozivNaBroj">123-4567</data>
</p>
<div class="clr"></div>
</section>
...
Kao što prikazuje primjer, podaci se ispisuju unutar HTML oznake data. Ime bookmarka s podacima definira atribut bookmark.
Ako želimo da se ispred podatka ispiše određeni tekst samo u slučaju postojanja podatka u bookmarku (npr tekst OIB / PDV ID broj: samo u slučaju ako je na računu iskazan taj podatak), tada cijeli odjeljak HTML upišemo unutar oznake dataSection, kojem u atributu bookmark zadamo na koji se bookmark odnosi.U slučaju potrebe za više uvjeta za ispis određenog podatka, moguće je korištenje ugnježđenih oznaka dataSection, u tom slučaju se oznake definiraju rednim brojem (dataSection, dataSection2,...); maksimalno je moguće koristiti 5 ugnježđenih atributa dataSection.
Donji primjer pokazuje kako se ispisuje država kupca ukoliko se radi o stranom kupcu/državi te da će se podatak ispisati samo ukoliko on postoji upisan u podacima o kupcu:
...
<dataSection bookmark="KupacDrzavaSamoStrane" removeEmpty="true">
<dataSection2 bookmark="KupacDrzava" removeEmpty="true">
<data bookmark="KupacDrzava">Austrija</data>
</dataSection2>
</dataSection>
...
U dataSection možemo s atributom removeEmpty="true" zadati, da se odjeljak HTML unutar dataSection ispiše samo u slučaju prisutnosti podatka unutar bookmarka na kojeg se odnosi dataSection. Ukoliko podatka u bookmarku nema, tada će cijeli sadržaj dataSection biti ispušten iz konačnog dokumenta. Na ovaj način možemo određene dijelove dokumenta HTML uvjetno generirati samo u slučaju prisutnosti određenog podatka na računu.
U dataSection možemo s atributom showOnValue="podatak" zadati, da se odjeljak HTML unutar dataSection ispiše samo u slučaju da je vrijednost bookmarka podatka jednaka vrijednosti upisanoj u atributu showOnValue. Na ovaj način možemo određene dijelove dokumenta HTML uvjetno generirati samo u slučaju prisutnosti određenog podatka na računu.
Donji primjer pokazuje kako će se podatak za ukupni iznos ispisan slovima pokazati samo u slučaju da je valuta računa hrvatska kuna.
...
<dataSection bookmark="NovcanaValuta" showOnValue="HRK">
<data bookmark="UkupnoZaPlacanjeSlovima">stopedeset</data>
</dataSection>
...
1.4 Ispis stavki u tablici
Primjer dolje prikazuje način oblikovanja i zadavanja pozicija za ispis podataka o stavkama dokumenta. Oznaka dataTableRow predstavlja odjeljak HTML, koji se ponavlja za svaku stavku. Pri svakom ponavljanju se oznake data popune podacima sljedeće stavke dokumenta.
...
<dataTable bookmark="Stavke">
<table>
<tr>
<th>Poz.</th>
<th align="left">Vrsta robe - usluge</th>
<th>Kol.</th>
<th>JM</th>
<th align="right">Cijena bez PDV-a</th>
<th>Rab. %</th>
<th align="left">PDV %</th>
<th>Vrijednost bez PDV-a</th>
</tr>
<dataTableRow bookmark="Stavke">
<tr>
<td><data bookmark="StavkePozicijaSTockom">1.</data></td>
<td align="left"><data bookmark="StavkeOpis">Testni artikl</data></td>
<td><data bookmark="StavkeKolicina">10,00</data></td>
<td><data bookmark="StavkeJedinicaMjere">kom</data></td>
<td align="right"><data bookmark="StavkeCijenaBezPDV">100,00</data></td>
<td><data bookmark="StavkePopust">5</data></td>
<td align="left"><data bookmark="StavkeStopaPDV">25</data>%</td>
<td><data bookmark="StavkeIznosBezPDV">1050,00</data></td>
</tr>
</dataTableRow>
<dataSample>
<tr>
<td>2</td>
<td>Drugi artikl</td>
<td>15</td>
<td>kom</td>
<td>114,162</td>
<td>19</td>
<td>193,687</td>
<td>150,471</td>
</tr>
<tr>
<td>3</td>
<td>Zadnji artikl u tablici</td>
<td>5</td>
<td>kom</td>
<td>155,450</td>
<td>11</td>
<td>131,949</td>
<td>100,868</td>
</tr>
</dataSample>
</table>
</dataTable>
...
Na primjeru je vidljiva i oznaka dataSample, koju koristimo prilikom oblikovanja HTML dokumenta. Taj dio koda unutar oznake dataSample se prilikom generiranja ispisa ignorira. Taj je dio koda namjenjen samo lakšem oblikovanju predloška i neće biti uključen u konačni dokument.
1.5 Kako uključimo slike
U predložak možemo uključiti željeni broj slika, koje koristimo za logotip ili predispisane potpise na dokumentima. Slike dodajemo korištenjem HTML oznake img te ih preko atributa src referenciramo putem relativne lokacije gledano na lokaciju datoteke doc_template.html. Slike dodajemo u arhivu ZIP kao odvojene datoteke ili ih zakodiramo u base64 i dodamo na način "inline" unutar datoteke HTML.
Ako koristite slike u zasebnim datotekama (PNG, JPEG, GIF), tada će biti uključene samo u ispis dokumenta u formatu PDF. Ukoliko želite dokumente ispisivati iizravno iz preglednika uporabom formata HTML, tada datoteke moraju biti uključene u HTML na način "embedded base64 data".
1.6 Kako uključimo ispis bar koda i slika artikala na dokument
Slike za koje postoji bookmark možemo dodati na dokument korištenjem uobičajene HTML oznake img, gdje umjesto atributa src upotrijebimo atribut bookmark i u njemu navedemo ime bookmarka sa slikom. Uporaba bookmarka za slike je prikazana na sljedećem praktičnom primjeru, koji prikazuje ispis bar koda:
...
<div id="barcode">
<img bookmark="BarkodZaPlacanje">
</div>
...
| Za ispis barkodova (QR, PDF417,..) se koristi oznaka img kao što je prikazano na prethodnom primjeru. |
Za popis mogućih bookmarka pogledajte poglavlje s popisom svih bookmarka ili kontaktirajte našu tehničku podršku za pomoć.
 | U predlošcima pripremljenima u jeziku HTML možete svaki bookmark upotrijebiti željeni broj puta. |
1.7 Kako napraviti rekapitulaciju za strane valute?
Na donjim primjerima ćemo pokazati kako napraviti rekapitulaciju za domaću valutu i rekapitulaciju za strane valute, te kako će izgledati kod za prepoznavanje valute u kojoj je izdan račun. Obadvije tablice moraju biti u HTML predlošku, kako bi se odgovarajuća tablica mogla ispisati.
Prvi primjer je tablica rekapitulacije za domaću valutu (HRK):
<div id="total-domestic">
<table>
<tr>
<td>Kontrolna količina:</td>
<td><data bookmark="KontrolnaKolicina">1,00</data></td>
</tr>
<tr>
<td>Rekapitulacija PDV-a:</td>
<td>HRK</td>
</tr>
<tr>
<td>Ukupni iznos bez PDV-a:</td>
<td><data bookmark="UkupnoBezPDV">100,00</data></td>
</tr>
<tr>
<td>Osnovica 25%:</td>
<td><data bookmark="OsnovaPDV2UDomVal">100,00</data></td>
</tr>
<tr>
<td>PDV 25%:</td>
<td><data bookmark="IznosPDV2UDomVal">25,00</data></td>
</tr>
<tr>
<td>Za uplatu HRK:</td>
<td><data bookmark="UkupnoZaUplatuUDomVal">125,00</data></td>
</tr>
</table>
</div>
Id total-domestic ćemo koristiti za prikazivanje odnosno sakrivanje tablice rekapitulacije ovisno o valuti.
Drugi primjer je tablica rekapitulacije za strane valute:
<div id="total-foreign" style="display: none;">
<table>
<tr>
<td></td>
<td>HRK</td>
<td><data bookmark="NovcanaValuta"></data></td>
</tr>
<tr>
<td>Ukupni iznos bez PDV-a:</td>
<td><data bookmark="UkupnoBezPDVUDomVal">65,02</data></td>
<td><data bookmark="UkupnoBezPDV">8,77</data></td>
</tr>
<tr>
<td>Osnovica 25%:</td>
<td><data bookmark="OsnovaPDV2UDomVal">65,02</data></td>
<td><data bookmark="OsnovaPDV2">8,77</data></td>
</tr>
<tr>
<td>PDV 25%:</td>
<td><data bookmark="IznosPDV2UDomVal">16,24</data></td>
<td><data bookmark="IznosPDV2">2,19</data></td>
</tr>
<tr>
<td>Za uplatu:</td>
<td><data bookmark="UkupnoZaUplatuUDomVal">81,25</data></td>
<td><data bookmark="UkupnoZaUplatu">10,96</data></td>
</tr>
</table>
</div>
Za rekapitulaciju u stranim valutama smo postavili style="display: none;", odnosno da se ta tablica po preuzetim postavkama ne prikazuje, s obzirom da je preuzeta rekapitulacija u domaćoj valuti.Za tablice se može koristiti željeni broj redova odnosno podataka, te odgovarajućih bookmarka.
Na početku oznake body ćemo dodati div oznaku s bookmarkom NovcanaValuta pomoću koje ćemo odrediti valutu računa te samim time odrediti koja tablica rekapitulacije će se ispisati.
<body onLoad="toggleTotalsRecapitulation();">
<div id="currencyPlaceHolder">
<data bookmark="NovcanaValuta"></data>
</div>
...
Id currencyPlaceHolder koristimo za dohvaćanje valute računa, primjer kako ga koristiti unutar javascript koda je naveden u daljnjem tekstu.S obzirom da navedeni div koristimo samo za određivanje valute, te njegova prisutnost nije potrebna na računu, pomoću sljedećeg CSS koda ćemo prikazati kako ga sakriti odnosno kako da se taj podatak ne ispisuje na računu.
<html>
<head>
<style>
#currencyPlaceHolder{
position: absolute;
top: -10000px;
left: -10000px;
}
</style>
</head>
<body>
...
Sljedeći odjeljak javascript koda postavljamo na vrhu HTML dokumenta unutar oznake head. Unutar njega je napisana funkcija toggleTotalsRecapitulation koja pomoću već navedenoga id-a currencyPlaceHolder dohvaća valutu računa, te pomoću nje određuje koja tablica rekapitulacije će se prikazati na računu.
<head>
<script type="text/javascript">
function toggleTotalsRecapitulation(){
var currencyPlaceHolder = document.getElementById("currencyPlaceHolder");
if(currencyPlaceHolder){
var totalDomestic = document.getElementById("total-domestic");
var totalForeign = document.getElementById("total-foreign");
if(currencyPlaceHolder.innerText == "HRK"){
totalDomestic.style.display = "initial";
if(totalForeign){
totalForeign.style.display = "none";
}
}
else{
totalForeign.style.display = "initial";
if(totalDomestic){
totalDomestic.style.display = "none";
}
}
}
}
</script>
</head>
Da bi gornji odjeljak koda radio, potrebno je pozvati funkciju unutar oznake body na sljedeći način:
<body onload="toggleTotalsRecapitulation()">
1.8 Opće upute za oblikovanje predložaka u jeziku HTML
Prilikom oblikovanja predložaka u jeziku HTML slijedite smjernice za oblikovanje HTML dokumenata za ispis. Umjesto relativnog pozicioniranja možete koristiti apsolutno pozicioniranje i mjernu jedinicu mm (milimetar). Za zahtjevnije predloške preporučamo da posao prepustite profesionalcima.
Više smjernica za oblikovanje dokumenata HTML za ispis na pisaču pronaći ćete na internetu, npr. https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/.
---
© E-RAČUNI d.o.o. 2003-2024