京东云打印模板标记语言规范

1.简介

本规范中

单位为基于分辨率（DPI）100 的像素为单位，下文如不做特别说明，单位统一为像素， X、Y 轴均以像素为单位。坐标系以左上角为起点（0,0）;
模板占位符统一为 “@{字段名称}”。

1.1 元素说明

元素	说明
text	标记文本元素
line	标记线条元素
rect	标记长方形、正方形元素
barcode	条码标记元素
image	图片标记元素
qrcode	二维码标记元素
stable	表格标记元素
ellipse	椭圆标记元素
water	水印标记元素

1.2 各元素必带公共属性

属性名称	说明
type	元素类型（1.1 中类型）
top	元素相对页面上边距们位置无需带单位
left	元素相对页面左边距们位置无需带单位
width	元素宽无需带单位
height	元素高无需带单位
content	占位符（@{字段}）或文本内容

1.3 页面图示

2. text(文本)

文本自身无边框，只有里面的文本内容，当内容显示不下时，会自动缩放

2.1 文本类型属性说明

属性名	说明	备注

fontName	字体名称	window 自体库
fontSize	字体大小	数据类型为整型，无需带单位
alignItem	垂直对齐	center：居中，默认居上
justifyContent	水平对齐	flex-start：左对齐 center：居中 flex-end 右对齐
fontWeight	字体粗细	bold：粗体默认为正常

2.2 示例

{
    "type": "text",
    "top": 11,
    "left": 238,
    "width": 226,
    "height": 30,
    "fontName": "Arial",
    "fontSize": 18,
    "fontWeight": "bold",
    "alignItem": "center",
    "justifyContent": "center",
    "content": "@{orderNo}"
}

3.line(线条)

线条用来画从一个起点到一个终点之间的连线。

3.1 线条类型属性说明

属性名	说明	备注
length	线段长度	长度像素为单位（与width值相同）
lineWidth	线段粗细	像素为单位（与height值相同）
lineType	样式类型	默认实心线段，其它暂不支持
orient	横竖线标识	h：横线，v：竖线

3.2 示例

{
    "type": "line",
    "top": 35,
    "left": 5,
    "width": 366,
    "height": 1,
    "lineStyle": "solid",
    "orient": "h",
    "lineWidth": 1,
    "length": 366
}

4. rect(矩形、正方形)

用来描绘一块区域

4.1 示例

{
    "type": " rect ",
    "top": 35,
    "left": 5,
    "width": 366,
    "height": 1
}

5.barcode(条码)

画布的基础控件，条形码根据数据生成的图片。

5.1 属性说明

属性名	说明	备注
content	内容	输入内容会转为条码
format	条码格式	code128

5.2 示例

{
    "type": "barcode",
    "top": 256,
    "left": 56,
    "width": 249,
    "height": 53,
    "content": "1234567",
    "format": "code128"
}

备注：内容过短时，可能会不能生成图片，请尝试对宽高比例调试

6. qrcode(二维码)

画布的基础控件，二维码根据数据生成的图片。

6.1 属性说明

当然可以，根据您提供的信息，我将它整理成一个简单的表格格式如下：

如果您需要在特定软件或环境中使用此表格（如Word文档、Excel等），请告诉我具体需求，以便我能提供更详细的帮助。

属性名	说明	备注
content	内容	输入内容会转为二维码内容
format	格式	qrcode

**6.2 示例 **

{
    "type": "qrcode",
    "top": 256,
    "left": 56,
    "width": 249,
    "height": 53,
    "content": "1234567",
    "format": "qrcode"
}

7.image(图片)

画面的基础控件，插入静态图片资源。

7.1 属性说明

属性名	说明	备注
content	内容	不解析此属性
src	图片流字符串	base64 格式图片流

7.2 示例

{
    "type": "image",
    "top": 256,
    "left": 56,
    "width": 249,
    "height": 53,
    "src": "base64 流"
}

8、stable(表格)

表格的基础控件，插入 html 格式的 table。

8.1 属性说明

属性名	说明	备注
content	表格内容	html 的 table 表格字符串

8.2 示例

{
    "type": "stable",
    "top": 256,
    "left": 56,
    "width": 249,
    "height": 53,
    "content": "<table width=\"100%\" border=\"1\" style=\"border:1px solid black;border-collapse: collapse;\" dataTableTemplate=\"{data:'locateDs'}\"><tbody><tr> <td style=\"width:20%;textalign:center;font-size: 8pt;\">@{locationNo}  </td> <td style=\"width:70%;text-align:center;font-size: 8pt;\">@{abbreviation}</td> <td style=\"width:10%;text-align:center;font-size: 8pt;\">@{locatedQty}</td></tr></tbody></table>"
}

8.3 未转字符串前表格示例

<table width="100%" 
       border="1" 
       style="border:1px solid black;border-collapse: collapse;"
       dataTableTemplate="{data:'locateDs'}">
  <tbody>
  <tr>
    <td style="width:20%;text-align:center;font-size: 8pt;">
      @{locationNo}
    </td>
    <td style="width:70%;text-align:center;font-size: 8pt;">
      @{abbreviation}
    </td>
    <td style="width:10%;text-align:center;font-size: 8pt;">
      @{locatedQty}
    </td>
  </tr>
  </tbody>
</table>

8.4 表格说明

dataTableTemplate 表格明细数据集合格式为{data:'集合名称'}
td 中占位符 @{集合中字段名称}
td 样式宽度百分比加起来百分百根据 8.2 示例中 width 计算具体宽

注意：需转议后，以字符串放入 content 字段内

9、water 水印字符。

9.1 属性说明

属性名	说明	备注
fontName	字体名称	使用window字体库
fontSize	字体大小	数据类型为整型，无需带单位
alignItem	垂直对齐	center：居中，默认居上
justifyContent	水平对齐	flex-start：左对齐; center：居中; flex-end: 右对齐
fontWeight	字体粗细	bold：粗体, 默认为正常
alpha	透明度	数值范围0-255

**9.2 示例 **

{
    "type": "water",
    "top": 11,
    "left": 238,
    "width": 226,
    "height": 30,
    "content": "京东云打印",
    "fontName": "Arial",
    "fontSize": 18,
    "lineHeight": "24px",
    "alignItem": "center",
    "justifyContent": "center",
    "alpha": 200
}

10、完整模版示例

{
    "top": "0.00cm",
    "left": "0.00cm",
    "width": "20.11cm",
    "height": "34.4cm",
    "items": [
        {
            "type": "text",
            "top": 11,
            "left": 238,
            "width": 226,
            "height": 30,
            "fontName": "Arial",
            "fontSize": 18,
            "fontWeight": "bold",
            "alignItem": "center",
            "justifyContent": "center",
            "content": "@{orderNo}"
        },
        {
            "type": "line",
            "top": 35,
            "left": 5,
            "width": 366,
            "height": 1,
            "lineStyle": "solid",
            "orient": "h",
            "lineWidth": 1,
            "length": 366
        },
        {
            "type": " rect ",
            "top": 35,
            "left": 5,
            "width": 366,
            "height": 1
        },
        {
            "type": "barcode",
            "top": 256,
            "left": 56,
            "width": 249,
            "height": 53,
            "content": "1234567",
            "format": "code128"
        },
        {
            "type": "qrcode",
            "top": 256,
            "left": 56,
            "width": 249,
            "height": 53,
            "content": "1234567",
            "format": "qrcode"
        },
        {
            "type": "image",
            "top": 256,
            "left": 56,
            "width": 249,
            "height": 53,
            "src": "base64 流"
        },
        {
            "type": "stable",
            "top": 256,
            "left": 56,
            "width": 249,
            "height": 53,
            "content": "<table width=\"100%\" border=\"1\" style=\"border:1px solid black;border-collapse: collapse;\" dataTableTemplate=\"{data:'locateDs'}\"><tbody><tr> <td style=\"width:20%;textalign:center;font-size:8pt;\">@{locationNo} < /td> <td style=\"width:70%;text-align:center;font- size: 8pt;\">@{abbreviation}</td > < td style = \"width:10%;text-align:center;font-size: 8pt;\">@{locatedQty}</td></tr></tbody></table>"
        },
        {
            "type": "water",
            "top": 11,
            "left": 238,
            "width": 226,
            "height": 30,
            "content": "京东云打印",
            "fontName": "Arial",
            "fontSize": 18,
            "lineHeight": "24px",
            "alignItem": "center",
            "justifyContent": "center",
            "alpha": 200
        }
    ]
}

分享