# 打印面单
发送指令给打印组件,打印对应的面单
# 注意事项
- 调用前,先从 获取打印报文 或 电子面单取号 接口获取返回的
print_info
信息; - 调用完此指令成功后,需要自行调用 电子面单打单成功通知 接口通知平台扭转电子面单状态;
- 若需要流转订单发货状态,需要自行调用 订单发货 接口;
- 若出现面单裁切或面单大小非130*76,则必须在size中传入面单大小。可自行调用获取面单标准模板接口获取标准面单模板大小
# 请求示例
const ws = new WebSocket('ws://127.0.0.1:12705');
ws.onopen = () => {
console.log('与打印组件建立连接成功: ');
ws.send(JSON.stringify({
command: 'print',
version: '2.0', // 必传
requestID: '1234', // String, 调用方保证唯一
taskList: [{
taskID: '1234', // String, 调用方保证唯一
printInfo: '', // String, [获取打印报文]接口返回的print_info
printNum: {
curNum: 1, // 打印计数-当前张数
sumNum: 2, // 打印计数-总张数
},
splitControl: 0 // 可不传, 默认为0, 根据自定义内容自动分页;1,禁止分页;2;强制分页, 内容打印在第二页
showDeliveryLogo: 0, // 可不传, 默认为1, 传0时不展示快递公司logo
// 自定义模板信息,没有自定义模板需求可不传
// 参考模板url:https://mmec-shop-1258344707.cos.ap-shanghai.myqcloud.com/shop/public/2023-11-10/a80c0110-3fb8-4190-bdcc-10124b7dd0ce.html
customInfo: {
templateUrl: 'https://mmec-shop-1258344707.cos.ap-shanghai.myqcloud.com/shop/public/2023-11-10/a80c0110-3fb8-4190-bdcc-10124b7dd0ce.html', // 自定义模板url
// 模板里面定义的数据字段
// 模板里使用{{{}}},数据可以通过<br>换行
data: {
shopName: "测试小店",
productInfo: [
{name: "商品1", count: 1, code: "asd", description: "商品描述"},
{name: "商品2", count: 2, code: "zxc123", description: "商品<br>描述"}
],
imgSrc: "https://www.tencent.com/img/index/tencent_logo.png",
productQRcode: "https://www.tencent.com/zh-cn/",
productBarcode: "product1"
}
},
// 面单补充信息,用来覆盖寄件人信息,没有这种需求可以不传
extendData: {
sender: {
address: {
provinceName: "广东省",
cityName: "广州市",
countyName: "海珠区",
detailInfo: "TiT创意园"
},
userName: "张三",
telNumber: "1311111111"
}
},
}],
printType: 1, // Number 打印类型,默认为 1,打印固定高度的面单;如果为2,则打印任意自定义内容,需要传递 size 参数指定纸张尺寸,printInfo 改为传递 base64 格式的 html
size: {
width: 76, // 纸张尺寸,单位毫米,printType 为 2 时必传,若是出现面单裁切或面单大小非130*76,则必须传入size
height: 130
},
printer: '_KM_202_NEW_', // 选中的打印机,printer.name
}))
};
ws.onmessage = (e) => {
const resp = JSON.parse(e.data || '{}')
if (resp.command === 'print') {
console.log('打印结果: ', resp);
}
};
# 返回参数示例
{
"requestID": "1234",
"command": "print",
"results": [{
"taskID": "1234",
"success": true,
"failureReason": ""
}]
}
# 自定义模板示例
<div>
<style>
.title {
font-weight: 700;
/* 长度单位px, 数值等于 mm * 10, 如面单上10mm,为100px */
height: 100px;
}
</style>
<div class="title">
店铺名称 {{ shopName }}!
</div>
{{#productInfo}}
<div>{{name}},{{count}},{{code}}, {{{description}}}</div>
{{/productInfo}}
<img src="{{imgSrc}}" width="300" height="50"/>
<!-- bar-code配置信息见下文 -->
<bar-code content="{{productBarcode}}" width="300" height="60" config='{"displayValue": true, "textAlign": "left"}' ></bar-code>
<qr-code content="{{productQRcode}}" width="120" height="120" ></qr-code>
</div>
# 自定义模板语法示例
模板基于mustache.js模板引擎。
# Variables
最基本的标签类型是简单变量。一个 标签会渲染当前上下文中key为name的值。如果没有这样的key,将不会渲染任何内容。 所有变量默认情况下都会进行 HTML 转义。如果你想渲染未转义的 HTML,请使用三个大括号:{ { { name } } } 。你也可以使用 & 来取消转义一个变量。
Data:
{
"name": "Chris",
"company": "<b>GitHub</b>"
}
Template:
* {{name}}
* {{age}}
* {{company}}
* {{{company}}}
* {{&company}}
Output:
* Chris
*
* <b>GitHub</b>
* <b>GitHub</b>
* <b>GitHub</b>
模板中可用a.b的表示方法,来引用data中的属性。 Data:
{
"name": {
"first": "Michael",
"last": "Jackson"
},
"age": "RIP"
}
Template:
* {{name.first}} {{name.last}}
* {{age}}
Output:
* Michael Jackson
* RIP
# Sections
根据对应key的值,文本将被渲染零次或多次。 一个section以一个井号开始,以一个斜杠结束。如一个 person section,由 { { #person } } 开始,由 { { /person } } 结束。两个标签之间的文本被称为该section的 "文本块"。一个section的行为由其值决定。
# False Values or Empty List
如果 person 的key不存在,或其值为null, undefined, false, 0, NaN,空字符串或空数组,这个文本块不会被渲染。
Data:
{
"person": false
}
Template:
Shown.
{{#person}}
Never shown!
{{/person}}
Output:
Shown.
# Non-Empty Lists (循环)
- 如果key person 存在且其值不为 null、undefined,false或空列表,该文本块将会被渲染一次或多次。
- 当值为列表时,该列表中的每个项都将会被渲染。通过这种方式,我们可以循环渲染列表。
Data:
{
"stooges": [
{ "name": "Moe" },
{ "name": "Larry" },
{ "name": "Curly" }
]
}
Template:
{{#stooges}}
<b>{{name}}</b>
{{/stooges}}
Output:
<b>Moe</b>
<b>Larry</b>
<b>Curly</b>
当值是一个字符串列表,可以用 . 表示当前项。
Data:
{
"musketeers": ["Athos", "Aramis", "Porthos", "D'Artagnan"]
}
Template:
{{#musketeers}}
* {{.}}
{{/musketeers}}
Output:
* Athos
* Aramis
* Porthos
* D'Artagnan
# Inverted Sections (取反)
可以用 { { ^section } } 开始一个取反的文本块, 即仅当其值为null、undefined、false、NaN或空列表时,才会渲染取反部分的文本。
Data:
{
"repos": []
}
Template:
{{#repos}}<b>{{name}}</b>{{/repos}}
{{^repos}}No repos :({{/repos}}
Output:
No repos :(
更多语法可参考mustache.js。
# 条形码配置示例
<bar-code content="{{productBarcode}}" width="300" height="60" config='{"displayValue": true, "textAlign": "left"}' ></bar-code>
参数 | 类型 | 描述 |
---|---|---|
width | number | 条形码整体宽度 |
height | number | 条形码整体高度 |
config | string | 条形码配置,JSON格式 |
# 条形码常用配置
选项 | 默认值 | 类型 | 描述 |
---|---|---|---|
format | "auto" (CODE128) | String | 条码类型 |
width | 2 | Number | 单条条码宽度 |
height | 100 | Number | 条码高度 |
displayValue | false | Boolean | 条码下方是否显示值 |
text | undefined | String | 覆盖条码下方显示值 |
fontOptions | "" | String | "bold" 加粗, “italic” 斜体, “bold italic” 加粗且斜体 |
font | "monospace" | String | 字体 |
textAlign | "center" | String | 文字的水平位置: "center" 居中, “left” 靠左, “right” 靠右 |
textPosition | "bottom" | String | 文字的垂直位置 “bottom” 条码下方,“top” 条码上方 |
textMargin | 2 | Number | 条码与文字之间的间距 |
fontSize | 20 | Number | 文字字号 |
background | "#ffffff" | String (CSS color) | 背景颜色 |
lineColor | "#000000" | String (CSS color) | 条码颜色 |
margin | 10 | Number | 条码与四周的间距 |
marginTop | undefined | Number | 条码与上方的间距 |
marginBottom | undefined | Number | 条码与下方的间距 |
marginLeft | undefined | Number | 条码与左边的间距 |
marginRight | undefined | Number | 条码与右边的间距 |
更多语法可参考JsBarcode。