vue使用斑马打印机打印条码/条码号及个人信息功能

需求描述

后台项目开发中需要打印数据的条码和条码号及个人信息（支持单个、多个及单条码多次打印）

实现过程（斑马打印机zd888）

1.到斑马官方网站下载对应打印机的驱动（支持与下载 | Zebra）

注：链接: https://pan.baidu.com/s/1FWSNd1eFwMNhf471M_RiDg?pwd=qgu6 提取码: qgu6 复制这段内容后打开百度网盘手机App，操作更方便哦

2.下载BrowserPrint斑马打印机依赖（Zebra Browser Print 支持 | Zebra）或链接: https://pan.baidu.com/s/1ln5AzcMkjmazfSMWt-adKA?pwd=v941 提取码: v941 复制这段内容后打开百度网盘手机App，操作更方便哦

注：斑马打印机依赖使用教程     链接: https://pan.baidu.com/s/1L66J2CVMUdaliT4Pe1EWUg?pwd=aqsm 提取码: aqsm 复制这段内容后打开百度网盘手机App，操作更方便哦

3.code是打印的张数    highLightRow为高亮行

const printMe = async (code: number) => {
  try {
    // Create a new instance of the object
    const browserPrint = new ZebraBrowserPrintWrapper();

    // Select default printer
    const defaultPrinter = await browserPrint.getDefaultPrinter();

    // Set the printer
    browserPrint.setPrinter(defaultPrinter);

    // Check printer status
    const printerStatus = await browserPrint.checkPrinterStatus();
    // Check if the printer is ready
    if (!printerStatus.isReadyToPrint) {
      ElMessage.error("请检查是否已连接打印机");
      return;
    }
    const stamp = async (data: any) => {
      //打印纸张排版
      const zpl = `^XA
  ^JMA^LL239^PW400^LH10^MD30^PM100^FS
  ^CW1,E:SIMSUN.FNT
  ^CI28
  ^FO10,20^A1N,24,24^FD${data.batchNo}  ${data.deptName}^FS
  
  ^FO30,50^BY2
  ^BCN,80,N,N,N,A
  ^FD${data.materialBarcode}^FS
  
  
  ^FO10,135^A1N,24,24^FD${data.materialBarcode}   ^FS


  ^FO10,170^A1N,24,24^FB400,9999,0,L,^FD${data.materialName} ^FS
 
  ^FO10,205^A1N,24,24^FD ${data.storageRequirementName} ${dayjs(data.validDate).format("YYYY-MM-DD")}^FS
  ^PR3,30
  ^PQ1
  ^XZ`;
      await browserPrint.print(zpl);
    };
    const stampGodown = async (data: any) => {
      //打印纸张排版
      const zpl = `^XA
  ^JMA^LL239^PW400^LH10^MD30^PM100^FS
  ^CW1,E:SIMSUN.FNT
  ^CI28
  ^FO10,20^A1N,24,24^FD${data.incomeUser}  ${dayjs(data.incomeDate).format("YYYY-MM-DD")}^FS
  
  ^FO30,50^BY2
  ^BCN,80,N,N,N,A
  ^FD${data.incomeNo}^FS
  
  
  ^FO10,135^A1N,24,24^FD${data.incomeNo}   ^FS


  ^FO10,170^A1N,24,24^FB400,9999,0,L,^FD${data.deliveryUser} ${dayjs(data.deliveryDate).format("YYYY-MM-DD")} ^FS
 
  ^FO10,205^A1N,24,24^FD  ${data.remark}^FS
  ^PR3,30
  ^PQ1
  ^XZ`;
      await browserPrint.print(zpl);
    };
    let data = [];
    if (code == 1) {
      stampGodown(highLightRow.value);
    } else {
      data = materialList.value.filter((item: { checked: boolean }) => {
        return item.checked;
      });
      if (code == 2) {
        //打印全部条码
        materialList.value.forEach((element: any) => {
          for (
            let index = 0;
            index < Number(element.incomeAssistNumber);
            index++
          ) {
            stamp(element);
          }
        });
      } else if (code == 3) {
        //选中物料全部条码
        data.forEach((element: any) => {
          for (
            let index = 0;
            index < Number(element.incomeAssistNumber);
            index++
          ) {
            stamp(element);
          }
        });
      } else {
        //选中物料单个条码
        data.forEach((element: any) => {
          stamp(element);
        });
      }
    }
  } catch (error) {
    ElMessage.error("请检查是否已连接打印机");
  }
};