文档 >>> 菜鸟打印交互协议                                菜鸟模板编辑器

菜鸟打印标记语言规范

1、简介

2、page(页)

3、layout(布局)

4、text(文本)

5、line(线条)

6、rect(矩形)

7、barcode(条码与二维码)

8、image(图片)

9、table(表格)

10、pageIndex(页码)

11、header,footer(页眉页脚)

12、style(样式)

ChangeLog

1. 简介

菜鸟打印标记语言是菜鸟官方定义的一套用于描述打印内容的的标准,其定义了一套标准规范,通过这套标记语言,可以:

如果熟悉HTML语言或者java script,那么很容易就会熟悉菜鸟打印标记语言,我们在设计该套语言标准的时候尽量参考HTML规范,且相较HTML来说更加的精简。

本规范中除文本外的其他元素,单位均支持毫米(mm)和磅(pt),默认单位是mm(毫米),mm可以省略,如width=20.5,下文如不做特别说明,单位一律是mm(毫米)。 坐标系以左上角为起点(0,0)。

1 元素概览

打印标记语言包含布局元素和基础元素两类,如下:

布局元素 说明
page 代表的是打印纸的长度和宽度
header 页眉
footer 页脚
layout 打印纸上控制布局使用
table 用表格布局
基础元素 说明
text 用来标记文本元素
line 用来标记线条元素
rect 用来标记矩形元素
barcode 条码二维码标记元素
image 图片标记元素
pageIndex 页码

2、page(页)

页面属性,用于描述打印纸张的信息以及分页属性,是整个xml的根节点。

2.1 width(宽度)

纸张的宽度,如width=100.5。

2.2 height(高度)

纸张的高度,如height=80。

2.3 splitable(分页打印)

是否支持分页打印,支持true和false两种设置,默认值:splitable="false"。

3、layout(布局)

画布的布局元素,其他元素都需要放在布局元素内。布局支持二种类型,水平布局和垂直布局,layout中也可以嵌套其它layout,示例:

<layout left="1.8" top="2.2" width="8.3" height="2.5" id="1">
</layout>

采用相对父节点的坐标进行描述 效果如下图:

3-layout效果图

3.1 id(主键ID)

布局的主键ID,ID类型,如id="1"。

3.2 left(左上角X坐标)

布局的左上角绝对X坐标,如left="1.8"。

3.3 top(左上角Y坐标)

布局的左上角绝对Y坐标,如top="2.2"。

3.4 width(宽度)

布局的宽度,如width="8.3"。

3.5 height(高度)

布局的高度,如height="2.5"。

3.6 ref(引用布局)

引用的布局的主键ID,IDREF类型,把被引用的布局属性全部复制过来,当前布局可以重新设置属性去覆盖引用过来的布局属性。如ref="1"。

3.7 orientation(布局方向)

支持水平(horizontal)和垂直(vertical)二种布局模式,默认为水平布局。 a. 水平布局如下图(如orientation="horizontal"):

3.7.a-水平布局图 水平布局中的元素,都以水平模式排列。

b. 垂直布局如下图(如orientation="vertical"):

3.7.b-垂直布局图 垂直布局中的元素,都以垂直模式排列。

3.8 splitable(分页打印)

是否支持分页打印,支持true和false两种设置,默认值:splitable="true"。一个layout是否支持分页打印由下列情况决定:

3.9 style(样式)

layout可用的style属性如下, 详细含义请查看(style样式)

属性名 说明
zIndex 图层
overflow 超出处理
backgroundColor 背景色
borderWidth 边框宽度
borderStyle 边框样式
margin 元素外边距
padding 元素内边距

4. text(文本)

画布的基础元素,文本自身无边框,只有里面的文本内容。 如果只是简短文本并且文本中没有特殊字符可以如下方式使用:

<text width="5.6" value="菜鸟网络" style="fontSize:16"/>
    

效果如下图:

4-文本效果图

如果文本比较长或者有换行需求,可以使用

<text width="5.6" style="fontSize:16">
line 1 
line 2 
</text>

注意:每一行文本前后的空白字符都会被保留。

如果文本中有特殊字符,如“,&,‘,<,>等等xml规范中的特殊字符,可以如下方式使用,这种方式文本中的特殊字符不会被转义:

<text width="5.6" style="fontSize:16">
<![CDATA[some text, &,",',<,> ... 菜鸟网络]]>
</text>

备注:如果text内容中要输出"<%"或"%>",需要添加""做转义,也即"<\%"或"%>" 。

4.1 width(宽度)

文本框的宽度,如width="10.5",如省略则由layout确定宽度。

4.2 height(高度)

文本框的高度,如height="10",如省略则由layout确定文本框的高度。

4.3 value(值)

文本显示的内容,字符串型,如value="菜鸟网络"。

4.4 style(样式)

text可用的style属性如下, 详细含义请查看(style样式)

属性名 说明
alpha 透明度
align 水平对齐
valign 垂直对齐
rotation 旋转角度
direction 文字书写方向
orientation 文本排版方向
fontColor 字体颜色
backgroundColor 背景色
fontFamily 字体类型
fontSize 字体大小,如fontSize:8。可以取值为"auto",此时会根据文本框大小进行字体缩放
fontWeight 字体粗细
fontItatlic 字体是否斜体
fontUnderline 字体是否有下划线
lineHeight 行高
letterSpacing 字符间距
wrap 多选文本还是单行文本

5.line(线条)

画布的基本元素,线条用来画从一个起点到一个终点之间的连线。 示例:

<line startX="3.2" startY="5.5" endX="10.2" endY="6.5"  style="lineType:solid" /> 

效果如下图(蓝色为所画线条):

5-线条效果图

5.1 startX(起始点X坐标)

线条起始点X坐标,如startX=30.5。

5.2 startY(起始点Y坐标)

线条起始点Y坐标,如startY=20.95。

5.3 endX(终点X坐标)

线条终点X坐标,如endX=79.85。

5.4 endY(终点Y坐标)

线条终点Y坐标,如endY=78。

5.5 style(样式)

详见(style样式)

属性名 说明
lineColor 线条颜色
lineWidth 线条宽度
lineType 线条的样式

6. rect(矩形)

画布的基础元素,用来描绘一块区域。如 <layout left="1.8" top="2.2" width="8.3" height="2.5"> <rect width="3.3" height="1.5" style="borderStyle:solid"/> </layout>

效果图如下:

6-矩形效果图

6.1 width(宽度)

矩形的宽度,如width="30.3"。

6.2 height(高度)

矩形的高度,如height="1.5"。

6.3 style(样式)

参考(style样式)

属性名 说明
rotation 旋转角度
fillColor 填充色
borderWidth 边框宽度
borderStyle 边框样式

7.barcode(条码与二维码)

画布的基础控件,条形码根据数据生成的图片。 示例: xml <layout left="1.8" top="2.2" width="8.3" height="3.5"> <barcode width="2.5" height="7.0" value="123987af" type="code128a" style="hideText:true"/> </layout>

如果barcode中有特殊字符,如“,&,‘,<,>等等xml规范中的特殊字符,可以如下方式使用,这种方式文本中的特殊字符不会被转义:

<barcode width="2.5" height="7.0" type="code128a" style="hideText:true">
<![CDATA[123987af<>!&*$#]]>
</barcode>

备注:如果要输出"<%"或"%>",需要添加""做转义,也即"<\%"或"%>" 。

效果图如下:

7-条形码效果图

7.1 width(宽度)

条形码的宽度,如width="2.5"。

7.2 height(高度)

条形码的高度,如height="7.0"。

7.3 value(数据)

条形码的数据,字符串,如value="123987af"。

7.4 type(条码类型)

条形码的类型,枚举值,如type="code128a"。

7.5 primary(MaxiCode特有属性)

生成条码需要到的部分核心信息,邮编+国家代号+服务商等级

7.6 mode(MaxiCode特有属性)

取值2到6,1被废弃,取值含义如下:

2:主要信息为一个结构化收件人信息加上一个数字型态的邮递编号,次要信息至多可编入84个字元(character)。

3:主要信息为一个结构化收件人信息加上一个文数字型态的邮递编号,次要信息至多可编入84个字元。

4:主要信息加上次要信息至多可编入93个字元。模式4是标准符号,其指示在主要信息部分采用EEC,而在次要信息部分采用SEC,这种模式下共有93个资料字码。

5:主要信息加上次要信息至多可编入77个字元。模式5是全EEC模式,其指示在主要信息及次要信息部份全部采用EEC,符号有77个资料字码。

6:主要信息加上次要信息至多可编入93个字元。模式6为扫瞄器编程模式,其指示符号表示的信息是用于扫瞄器编程,主要信息采用EEC,次要信息采用SEC。

类型 码式
条形码 code128a,code128b,code128c,upca,code11,postnet,Code39,Code93,UPC-A,UPC-E,FIM,EAN-8,EAN-13,Plessey,Telepen,ITF-14,Interleaved 2 of 5,MaxiCode,Data Matrix
二维码 qrcode,pdf417

参考(style样式)

属性名 说明
rotation 旋转角度
hideText 是否显示文本

8.image(图片)

画面的基础控件,插入静态图片资源。 示例:(真实的图片)

<layout left="1.8" top="2.2" width="8.3" height="3.5">
    <image width="5.5" height="4.5" src="http://www.taobao.com/test.jpg" />
</layout>

效果如下图:

9-图片效果图

8.1 width(宽度)

图片的宽度,如width="5.5"。

8.2 height(高度)

图片的高度,如height="4.5"。

8.3 src(图片路径url)

图片的资源路径,字符串型。如src="http://www.taobao.com/test.jpg"。

8.4 style(样式)

详见(style样式)

属性名 说明
alpha 透明度
rotation 旋转角度

9、table(表格)

9.1 定义表格的标签

以下示例是一个简单带表头的,2 * 2 表格,其中 fieldx 是一个元素,可以是layout,也可以是文本,图片,二维码,线条,矩形元素。

<table width="80">  
    <tr>
        <th width="40"> header1 </th>
        <th width="40"> header2 </th>
    </tr>
    <tr>
        <td> field1.1 </td>
        <td> field1.2 </td>
    </tr>
    <tr>
        <td> field2.1 </td>
        <td> field2.2 </td>   
    </tr>
</table>

9.2 table(表格)

9.3 tr(行)

tr目前暂不支持属性

9.4 th(表头)

9.5 td(单元格)

td标签支持四个属性colspan,rowspan,width,height

9.6 table支持的style

9.7 表格对分页的支持

10.pageIndex(页码)

画布的基础元素,用于在分页打印时输出页码。

10.1 页码定义

页码是一种特殊的文本元素,带了两个占位符的格式化字符串,示例如下:

<pageIndex format=“第currentPageNumber/totalPageNumber页” style=“fontSize:10;valign:middle;fontWeight:bold;fontFamily:Arial”></pageIndex>

打印组件在处理分页时,会先计算出总的页数,然后对每一页都替换currentPageNumber和totalPageNumber。

10.2 format

输出页码的格式,格式可以自定义,但必须包含currentPageNumber和totalPageNumber两个占位符。

10.3 style(样式)

pageIndex是一种特殊的text,所支持的style和text一致

10.4 限制

pageIndex只能被header和footer布局元素所包含,不能出现在其他布局元素中

11.header,footer(页眉页脚)

画布的布局元素,用于在分页时打印页面页脚

11.1 页眉页脚定义

header、footer是一类特殊的layout布局元素,示例如下

<header width="80" height="10" style="zIndex:1;overflow:visible;borderWidth:1;">
    <layout width="100" height="10" style="zIndex:1;overflow:visible;">
       <pageIndex format="第currentPageNumber/totalPageNumber页" style="fontSize:15;valign:middle;fontWeight:bold;fontFamily:黑体" />
    </layout>
</header>
<footer width="100" height="10" style="zIndex:1;overflow:visible;borderWidth:1;">
    <layout width="80" height="10" style="zIndex:1;overflow:visible;">
       <pageIndex format="当前currentPageNumber页 共totalPageNumber页" style="fontSize:15;valign:middle;fontWeight:bold;fontFamily:黑体" />
    </layout>
</footer>

11.2 页眉页脚特性

12.style(样式)

样式不是画布的基础元素,用来描述基础元素的展现形式。样式由一组属性组成,每个属性有一个值,属性名称和值通过冒号分开。如property:value。多个样式属性之间使用分号分开,属性之间的空格会被忽略。如style="alpha:0.6; align:left;"。

10-样式效果图

元素框的最内部分是实际的内容,直接包围内容的是内边距。

12.1 边距

12.2 对齐方式

12.3 字体

12.4 文本

10.15行高效果图

线条与边框

12.5 其他样式

ChangeLog

2017 cainiao.com 版权所有。 未经允许,不得进行任何形式的修改、传播等行为。菜鸟网络保留修改权利。