POS Print JSX Template

Introduction

JSX template for POS print. numeral and dayjs are embedded to provide formating utilities for amount and date.

API

dydrate

dydrate(template, style, data, context);

• template: the template string.
• style: style object referenced in the template.
• data: data object referenced in the template.
• context: context object referenced in the template.

Returns a hydrated dom tree.

precompile

precompile(template);

• template: the template string.

Returns the precompiled code ready for hydrate.

Template example

<root charset="utf-8" isa="esc">
  <text>Hello, world!</text>
</root>

Tags in template

root

Should be the only root node of the template.

<root
  charset="utf-8|GB2312|GB18030..."
  isa="esc|tsc"
>
  ...
</root>

• charset (required): sepcify the charset for printer and the template (no charactor beyond the charset scope).
• isa (required): the instruction set architecture of the printer. Currently esc and tsc are avialable.

text

<text
  [margin-position="none|bottom|left|right"]
  [margin-size="[0-255]"]
  [align="left|center|right"]
  [font-family="a|b|c"]
  [font-style="normal|b|i|u|u2|bi|biu|biu2|bu|bu2|iu|iu2"]
  [font-size="normal|wide|high|wide-high"]
  [text-spacing="default|[0-255]"]
  [color="normal|red|reverse"]
>
  Hello, world!
</text>

qrcode

<qrcode
  [align="left|center|right"]
  [margin="default|[0-255]"]
  [size="normal|wide|high|wide-high"]
>
  https://www.example.com
</qrcode>

img

<img
  format="bmp|png|jpg"
  [size="normal|wide|high|wide-high"]
  [align="left|center|right"]
>
  iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=
</img>

table

<table
  columns-width="4,2,1,1"
  columns-align="left,center,right,right"
  columns-overflow="wrap,ellipse,hidden,hidden"
  [font-family="a|b|c"]
  [font-style="normal|b|i|u|u2|bi|biu|biu2|bu|bu2|iu|iu2"]
  [font-size="normal|wide|high|wide-high"]
  [text-spacing="default|[0-255]"]
  [color="normal|red|reverse"]
>
  <tr
    [font-family="a|b|c"]
    [font-style="normal|b|i|u|u2|bi|biu|biu2|bu|bu2|iu|iu2"]
    [font-size="normal|wide|high|wide-high"]
    [text-spacing="default|[0-255]"]
    [color="normal|red|reverse"]
  >
    <td [align="inherit|left|center|right"]>abcdefg</td>
    <td [align="inherit|left|center|right"]>abc</td>
    <td [align="inherit|left|center|right"]>abc</td>
    <td [align="inherit|left|center|right"]>abc</td>
  </tr>
</table>

separator

<separator char="-|=|.|..." />

blank

<blank lines="1..." />

command

<command cmd="cut|open-cash-box" />

text for tsc

<text
  [margin-position="none|bottom|left|right"]
  [margin-size="[0-255]"]
  [align="left|center|right"]
  [font-family="1|2|3|4|5|TSS24.BF2|TSS16.BF2"]
  [font-size="normal|wide|high|wide-high"]
  [rotation="0|90|180|270"]
>
  Hello, world!
</text>

lr-text (unimplemented)

<lr-text>
  <text>A</text>
  <text>B</text>
</lr-text>

separator for tsc

<separator char="-|=|.|..." />