zebra斑马打印机前端实践记录!!!

前端web端调用斑马打印机时,其实是非常麻烦的,首先他是没有提供直接调用的api可以和打印机通信的,需要我们先安装斑马打印机支持web端调用的开发者工具 www.zebra.com/us/en/suppo…

首先下载js库,里面包含有demo和用法可以测试使用,最重要的是要下载第一个标注中的exe安装包, 傻瓜式安装完成后打开是这个样子的

因为我电脑没有连接斑马打印机所以点击第一个change按钮时是没有内容,报错的。

如果你的电脑是和斑马打印机连接的话，他会是一个下拉框会显示所有可以通信的斑马打印机列表。后续会贴上代码。 如果你当前页面初始化了打印机，会自动弹出添加设备的窗口，这里也可以手动添加。后续有机会的话贴上图片~~

小插曲~~

(23年写的文章,20240530 就在刚刚因为班厂区,需要重新配置打印,发现之前的全忘记了,赶紧来翻草稿箱,发现只写了一半,导致又鼓捣了半天才和打印机通信,所以今天把补充完整....) 这里还是需要点击ADD去手动配置一个的,原因是我的业务是通过接口获取要打印的设备IP及打印的内容ZPL编码, 它会默认有链接的设备,最好还是手动配置一个和后端返回一致的设备信息.

import { ref } from "vue";
import { ElMessage, MessageParamsWithType } from "element-plus";
type ZebraVOList = {
	ip: string;
	message: string;
};
// type ErrItem = {
// 	ip: string;
// 	message: string;
// 	devive: any;
// };
const useZebraPrint = () => {
	const devicesList = ref<any[]>([]); // 获取印机列表
	const selectDevice = ref<ObjectProps>({});
	const printerFlag = ref<boolean>(false);
	let errArr: ObjectProps = {};
	// const MAX_RETRY_TIMES = 3; // 设置最大重试次数
	// let retryCount = 0;
	const initZebraPrint = async () => {
		BrowserPrint.getLocalDevices((list: ObjectProps) => {
			if (!list.printer.length) {
				errorFun("无法获取打印机设备,请检查斑马打印机!");
				return;
			}
			devicesList.value = list.printer || [];
		});
	};
	console.log("标记斑马");

	const printTag = async (list: ZebraVOList[], suc?: any) => {
		list.forEach(i => {
			devicesList.value.forEach(item => {
				if (item.uid.includes(i.ip)) {
					selectDevice.value[i.ip] = item;
					errArr[i.ip] = 0;
				}
			});
			printCommonFun({ ip: i.ip, message: i.message });
		});
		suc && suc();
	};
	// 触发斑马打印发送指令
	const printCommonFun = (item: ZebraVOList) => {
		const { ip, message } = item;
		selectDevice?.value[ip]?.send(
			message,
			() => {},
			() => {
				// 错误的回调
				errArr[ip]++;
				if (errArr[ip] > 3) {
					errArr[ip] = 0;
					errorFun("超出重试次数,请检查斑马打印机!");
					return;
				}
				printCommonFun(item);
			}
		);
	};

	const errorFun = (message: MessageParamsWithType) => {
		console.log("打印失败了!!");
		printerFlag.value = false;
		ElMessage.error(message);
	};
	return {
		initZebraPrint,
		printTag,
		printerFlag
	};
};
export default useZebraPrint;

这是我封装的一个hooks

const { initZebraPrint, printTag } = useZebraPrint();

onMounted(() => {
    initZebraPrint();
});
printTag([data]);

这里接收的是个集合,是因为可能有多台斑马打印机所以会去调用不同的设备进行打印!

记录留念