Receipt Layout
Layout
For printing a fiscal transaction, the data has to be formatted, which is done using the HTML templating engine PUG (former JADE). Language details can be found on pugjs.org.
For Italian fiscal printers, the item description and additional text lines may be formatted freely, but referring amounts are created by the printer in a fixed format.
The following rules occur for fiscal receipts:
- Fixed header lines and header or footer logo graphics are configured with the program EpsonFpWizard and stored onto the printer
- Header lines within transaction data may be up to 46 characters long and have up to 4 lines in fiscal receipts or up to 5 lines in fattura
- Footer lines within transaction data may be up to 46 characters long and have up to 99 lines
- Description and text lines may be up to 38 characters long
- One transaction specific barcode may be printed in the last line of the footer
- The paper is cut after completion of the print
You can start http://localhost:5618/peri/pugedit for layout configuration, it works as a WYSIWYG editor.
Besides fiscal.pug different non-fiscal layout files can be provided on directory /EFR/rn/def/cfg, the file name is derived from the NF or DT tag: NF="Login" => "login.pug" (filename lowercase).
If it is required to store non-fiscal transactions without having printed them, set ESR tag Document Delivery DD="noprint".
For non-fiscal printouts:
- The whole print line width can be used
- Lines can be formatted, like emphasized with
<em>or double height with<h3>
Sample Printout
 |
PUG Editor
Workflow:
- Start http://localhost:5618/peri/pugedit with a browser
- [Open] e.g. file
/EFR/rn/def/cfg/fiscal.pug - Copy your sample transaction data into the textbox at the left side
- The right side box shows the transaction data transformed to HTML
- Modifications in PUG code (center box) are shown immediately
- When finished [Download] e.g. as fiscal.pug and copy it to
/EFR/rn/def/cfg/
EFR now transforms every transaction into HTML and renders it to the line printer. By their nature, fiscal printers provide only very limited formatting functionality.
At the moment, the editor implementation is fairly basic, but it is going to be evolved as base technique for transaction rendering and print layout.
Layout Example
//- fiscal.pug - Layout for Fiscal Transactions
-
function fStr(str) { return str || str === 0 ? str.toString().replace(/\r/g, '') : '' }
function fDec(dec) { return fStr(dec).replace(/\./, ',') }
function fAmt(Amt) { return fDec(Amt && Amt.toFixed ? Amt.toFixed(2) : Amt) }
function fPrc(Prc) { return fDec((Prc+'%').replace(/%%$/, '%')) }
function fD(D) { return D.substr(8, 2) + '-' + D.substr(5, 2) + '-' + D.substr(2, 2) }
function fTime(D) { return D.substr(11, 8).replace(/^0/, '') }
mixin pos(p)
if p.Qty && p.Pri
.DscTxt= fDec(p.Qty) + ' ' + fStr(p.QtyU) + ' x ' + fAmt(p.Pri)
if p.TaxG
.Dsc= fStr(p.Dsc)
.TaxG= fStr(p.TaxG)
else
.Dsc2= fStr(p.Dsc)
if p.Amt
.Amt= fAmt(p.Amt)
else
.Amt= fStr(p.LAmt)
mixin tot(t)
hr
.Tot
.Dsc2 TOTAL
.Amt= fAmt(t)
hr
mixin pay(p)
if p.Amt
.DscTxt= fStr(p.Dsc)
.Amt= fAmt(p.Amt)
else
.DscTxt= ' ' + fStr(p.Dsc)
.Amt= fStr(p.LAmt)
mixin tax(t)
.DscTax
.Prc= fPrc(t.Prc)
.Net= fAmt(t.Net)
.TAmt= fAmt(t.TAmt)
.TaxG= fStr(t.TaxG)
.Amt= fAmt(t.Amt)
mixin head(h)
if h
br
each v, k in h
if '_' !== k
.Txt= v._ ? fStr(v.value) : fStr(v)
mixin foot(f)
if f
br
each v, k in f
if '_' !== k
.TxtCenter= v._ ? fStr(v.value) : fStr(v)
html
head
title= ESR.DT||ESR.NF||'Receipt'
style(type='text/css').
body {
font-family: Consolas, 'Courier New';
width: 42ch;
background-color: white;
}
.Txt { white-space: pre; }
.TxtCenter {
white-space: pre;
text-align: center;
}
.Net, .TAmt, .TaxG, .Amt { text-align: right; }
.Pos, .Mod, .Lin, .Tot, .Pay, .Tax, .ItemHead {
display: grid;
grid-template-columns: 33ch 1ch 8ch;
}
.Dsc { grid-column: 1; }
.Dsc2, .DscTxt { grid-column: 1 / span 2; }
.DscTxt { white-space: pre; }
.TaxG { grid-column: 2; }
.Amt { grid-column: 3; }
.DscTax {
width: 90%;
display: grid;
grid-template-columns: 4fr 10fr 10fr;
}
.Print { display: none; }
@media fiscal {
.Disp, .Tax, .Tot { display: none; }
.Print { display: block; }
}
body
//- Display Cfg Location data
if Cfg && Cfg.Cmp && Cfg.Loc
.TxtCenter.Disp= fStr(Cfg.Cmp.Nam)
.TxtCenter.Disp= fStr(Cfg.Loc.Adr) + ' ' + fStr(Cfg.Loc.Zip) + ' ' + fStr(Cfg.Loc.City)
.TxtCenter.Disp= 'TaxId: ' + fStr(Cfg.Cmp.TaxId)
.TxtCenter.Disp
br
//- Header
+head(ESR.Head)
//- Itemheader
hr
.Lin.Disp
.Dsc Item
.TaxG %
.Amt Amt
.Disp
hr
//- required, do not change
each p in ESR.PosA||[]
div(class=p._)
+pos(p)
+tot(ESR.T)
each p in ESR.PayA||[]
div(class=p._)
+pay(p)
if ESR.TaxA
br
each t in ESR.TaxA
div(class=t._)
+tax(t)
//- Footer
.Print
br
+foot(ESR.Foot)
hr
.TxtCenter= 'Terminal: ' + fStr(ESR.TL) + '/' + fStr(ESR.TT) + ' ' + fStr(ESR.DT || ESR.NF || 'Receipt') + ': ' + fStr(ESR.TN)
.TxtCenter= fD(ESR.D) + ' ' + fTime(ESR.D)
Print Customer on Invoice
If ESR.Ctm shall be printed on invoices, replace +head(ESR.Head) with following code in invoice.pug
if ESR.Ctm
.Txt=ESR.Ctm.Nam
.Txt=ESR.Ctm.Adr
.Txt=ESR.Ctm.Zip + ' ' + ESR.Ctm.City
.Txt=ESR.Ctm.TaxId
Restrictions
The fiscal printer only allows layout of header- and footer lines, as well as item text, but the amounts are formatted by the printer itself.
Although transaction data usually is provided with UTF-8 encoding, not all characters can be printed. E.g. printing of the Euro symbol is not allowed.
Barcode
To add a barcode to a fiscal or non-fiscal layout, enter:
div
img(data-barcode="type=ean13" data-value="123456789012" style="width:30ch;height:3ch")
The data-barcode attribute defines barcode parameters, data-value the content. Style (local or CSS) is used for dimensioning.
data-barcode
| Type | Character set (as regular expression) |
|---|---|
| upc-a | [0-9]{11,12} |
| upc-b | 0[0-9]{10,11} |
| ean13 | [0-9]{12,13} |
| ean8 | [0-9]{7,8} |
| code39 | [0-9A-Z $%*+-./]{1,34} |
| itf | [0-9]{2,62} |
| codabar | [0-9A-Da-d$+-.&/:]{1,47} |
| code93 | [\u0000-\u007f^{&omid}]{1,59} |
| code128 | [\u0000-\u007f^{&omid}]{1,98} (default) |
| gs1-128 | [\u0000-\u007f^{&omid}]{2,96} |
| qr | QR type 1, 256 characters max. |
| qr2 | QR type 2 |
Optional further parameters
| Parameter | Default | Description |
|---|---|---|
| pos | 901 | Center |
| w | 3 | Module width in pixels, overrides style width |
| h | 100 | Barcode height in pixels, overrides style height |
| hri | 0 | Human readable interface: 0=no, 1=above, 2=below, 3=above and below |
| hri_f | 0 | HRI font: 0=Font A, 1=Font B |
Example of a very small barcode (code128):
div
img(data-barcode="w=1;h=30" data-value="This is a test")
data-value
The data-value can be set programmatically:
div
- var x = ESR.TL + ("0" + ESR.TT).slice(-2) + ("00000" + ESR.TN).slice(-6)
img(data-value=x style="width:30ch;height:3ch")
Graphic Printing
A company logo should be saved directly on the printer using the manufacturer's utility program (e.g. EpsonFpWizard.exe), along with fixed header- and footer lines. Do not use runtime graphic printing for these.
Example Response
XML Response
<TraC SQ="8943">
<Result RC="OK"/>
<Fis D="10-12-18 15:52" FN="0039 0002 10122018 99MEX030623" DN="0002" ZI="39" ID="99MEX030623"/>
</TraC>
Response Fis fields
| Element | Description | Description IT |
|---|---|---|
| D | Fiscal printer Date and time | DATA ORA |
| FN | Receipt Fiscal Number | - |
| DN | Receipt Document Number | NUMERO SCONTRINO FISCALE |
| ZI | Z report Index | NUMERO CHIUSURA GIORNALE |
| ID | Fiscal printer ID | MATRICOLA FISCALE |