开发者工具：Browser Print demo（需安装打印驱动zebra-browser-print-windows后运行DEMO）
知识储备：
使用ZPL控制Zebra打印机、
通过ZPL创建条码、
通过ZebraDesigner创建条码、
实时显示ZPL指令打印结果展示、
使用 ZebraNet Bridge 软件转换图片并下载至Zebra打印机;
可通过官方工具（试用30天）生成ZPL指令：
勾选打印至文件点击打印会生成prn文件，文件内容如下：
`
// 将拖拽面板xy轴坐标点位宽高等转 ZPL指令集
jsonToZpl(json) {
let zpl = "^XA\n"; // 开始标签格式
zpl += "^SEE:GB18030.DAT^FS" + "\n";
zpl += "^CWZ,E:SIMSUN.FNT" + "\n";
zpl += "^CI28" + "\n";
zpl += "^JMA" + "\n";
// 设置标签尺寸（宽x高）
zpl += "^LL" + json.height + "\n";
zpl += "^PW" + json.width + "\n";
// 处理数据项
for (const item of json.data) {
switch (item.type) {
case "1": // 动态文字
zpl += "^FO" + item.left + "," + item.top + "\n";
zpl += "^A0" + ",N" + item.fontSize + "\n";
zpl += "^FD" + item.value + "^FS" + "\n";
break;
case "2": // 一维码
// zpl += "^FO120,60^BY3^BCN,80,Y,N,N^FDDFL230310^FS"
zpl += "^FO" + item.left + "," + item.top + "\n";
zpl += "^BCN," + item.height + ",Y,N,N\n"; // 条形码类型（Code 128），高度，平铺模式，无校验位，无混合模式
zpl += "^FD" + item.value + "\n";
zpl += "^FS\n";
break;
case "3": // 二维码
let x3 = item.left,y3 = item.top,qrValue = item.value,qrSize = 5;
zpl += "^FO"+ x3 +","+ y3 + "^BQN,2," + qrSize +"^FDHM,B0200" + qrValue + "^FS";
break;
case "4": // 图片
// 将imgUrl 转换成 位图
let x = item.left, y = item.top,w = item.width <= 264 ? 264 : item.width,h = item.height <= 264 ? 264 : item.height;
zpl += "^FO" + x +","+ y + "^GFA,"+ w +","+ h + "," + "6,QF8KF0KF8JFI07IF8IFCI01IF8IFK0IF8FFC03F803FF8FF81FFE01FF8FF03FJ0FF8FF07EJ0FF8FE0FEJ07F8FC1FCJ03F8FC3FC007C3F8F87F800FC1F8F87F800FE1F8F87F001FE1F8F0FF001FE0F8F0FE003FF0F8:F0FCI07F0F8F0FCI03F0F8F0FEI03F0F8F0FFC003F0F8F0FFC007F0F8:F07F8007E0F8F87FI0FE1F8F87F001FC1F8F83F001FC3F8FC3E003FC3F8FC1E003FC3F8FE0C007E07F8FFJ0781FF8FF8I0F01FF8FFCI0F03FF8FFEK07FF8IFK0IF8IFCI07IF8JF001JF8QF8:::::";
break;
case "5": // 固定文字
zpl += "^FO" + item.left + "," + item.top + "\n";
zpl += "^A0" + ",N" + item.fontSize + "\n";
zpl += "^FD" + item.value + "^FS" + "\n";
break;
case "6": // 直线
//实现直线的ZPL编码
zpl += "^FO" + item.left + "," + item.top + "\n";
zpl += "^GB" + item.width + "," + item.height + "," + 1 + "B" + "\n";
break;
// 7 纸带 只取宽高色 无其他用处
default:
console.warn("信息:未知类型：" + item.type);
}
}
zpl += "^XZ\n"; // 结束标签格式
localStorage.setItem("zpl", JSON.stringify(zpl));
this.sendZplPrint(zpl);
return zpl;
},
// 发送ZPL打印指令集
sendZplPrint(zpl) {
// 1.将获取设备的信息保存 2.调用打印API
console.log("拖拽转zpl: " + zpl);
let that = this;
var xhr = new XMLHttpRequest();
let urlXhr = urlJsPrint + "write";
xhr.open("POST", urlXhr, true);
xhr.setRequestHeader("Content-Type", "application/json");
let parm = {
device: that.deviceApiParm,
data: zpl,
};
xhr.send(JSON.stringify(parm));
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
let dt = JSON.parse(xhr.responseText);
that.$message.success("信息：打印成功");
} else if (xhr.status !== 200) {
console.error("Request failed. Status:", xhr.status);
}
};
},
// 获取打印设备参数
getPrintDevice() {
let that = this;
try {
var xhr = new XMLHttpRequest();
let urlXhr = urlJsPrint + "default?type=printer";
xhr.open("get", urlXhr, true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log("Response:", xhr.responseText);
let dt = JSON.parse(xhr.responseText);
that.errorShow = false;
let printName = dt.name;
that.options = [];
let pa = {
label: printName,
key: printName,
};
that.options.push(pa);
that.dynamicDefaultValue = printName;
that.getUsePrintServe();
console.log(dt);
} else if (xhr.status !== 200) {
that.errorShow = true;
that.dynamicDefaultValue = "";
that.errorStr =
"1.请检查浏览器驱动程序Zebra Browser Print是否已经启动; 2.请检查打印机绿灯是否常亮，获取打印设备异常，请先本机连接打印设备再重试！ Error initializing or using Zebra printer:";
console.error("Request failed. Status:", xhr.status);
}
};
} catch (error) {
let str =
"获取打印设备异常，请先本机连接打印设备再重试！Error initializing or using Zebra printer:";
this.$message.error(str);
console.log(str);
}
},
getUsePrintServe() {
let that = this;
var xhr = new XMLHttpRequest();
let urlXhr = urlJsPrint + "available";
xhr.open("get", urlXhr, true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
let dt = JSON.parse(xhr.responseText);
if (dt.printer && dt.printer.length > 0) {
dt.printer.forEach((element) => {
if (element.connection == "usb") {
that.deviceApiParm = element;
console.log("打印参数获取：", that.deviceApiParm);
}
});
}
} else if (xhr.status !== 200) {
console.error("Request failed. Status:", xhr.status);
}
};
},
`
