如何在移动端Chrome的Angular应用中使用Zebra蓝牙打印机打印标签

问题背景 #

开发Angular Web应用，目标是通过手机端Chrome浏览器使用Zebra蓝牙打印机打印标签，但无法建立蓝牙连接并发送打印数据。

现有代码 #

import { Component } from '@angular/core';
import ZebraBrowserPrintWrapper  from 'zebra-browser-print-wrapper';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  
  private browserPrint: any;
  constructor() {
    this.browserPrint = new ZebraBrowserPrintWrapper();
  }
   onPrint() {
    try {
      // Get available printers
      const printers =  this.browserPrint.getAvailablePrinters();
      
      // Let user select printer
      const selectedPrinter = this.selectPrinter(printers);

      // Set the selected printer
      this.browserPrint.setPrinter(selectedPrinter);

      // Check printer status
      const printerStatus =  this.browserPrint.checkPrinterStatus();

      // Check if the printer is ready
      if (printerStatus.isReadyToPrint) {

        // ZPL script to print a simple barcode
        const serial = "0123456789";
        const zpl = `^XA
                    ^BY2,2,100
                    ^FO20,20^BC^FD${serial}^FS
                    ^XZ`;

        // Print the label
        this.browserPrint.print(zpl);

      } else {
        console.log("Error/s", printerStatus.errors);
      }

    } catch (error) {
      console.error(error);
    }
  }
 // Show printer selection dialog and return the selected printer
 private selectPrinter(printers: any[]): Promise<any> {
  return new Promise((resolve, reject) => {
    const selectedPrinter = window.prompt("Sélectionnez une imprimante:", printers[0].name);

    if (selectedPrinter) {
      resolve(selectedPrinter);
    } else {
      reject("Aucune imprimante sélectionnée.");
    }
  });
}

}

问题排查与解决步骤 #

1. 修正异步方法的处理逻辑 #

getAvailablePrinters、checkPrinterStatus、selectPrinter均为异步操作，当前同步赋值会获取到Promise而非实际数据，需用async/await处理：

async onPrint() {
  try {
    // 等待获取打印机列表
    const printers = await this.browserPrint.getAvailablePrinters();
    
    // 等待用户选择打印机
    const selectedPrinter = await this.selectPrinter(printers);

    this.browserPrint.setPrinter(selectedPrinter);

    // 等待获取打印机状态
    const printerStatus = await this.browserPrint.checkPrinterStatus();

    if (printerStatus.isReadyToPrint) {
      const serial = "0123456789";
      const zpl = `^XA
                  ^BY2,2,100
                  ^FO20,20^BC^FD${serial}^FS
                  ^XZ`;

      // 等待打印操作完成
      await this.browserPrint.print(zpl);
    } else {
      console.log("错误信息:", printerStatus.errors);
    }
  } catch (error) {
    console.error(error);
  }
}

2. 确认Zebra Browser Print依赖配置 #

• 确保已执行npm install zebra-browser-print-wrapper完成包安装
• 在项目index.html中引入Zebra官方Browser Print脚本：

  <script src="https://www.zebra.com/content/dam/zebra_new_ia/en-us/solutions-software/software/browser-print/browser-print-latest.min.js"></script>
  

• 提前在手机系统设置中完成与Zebra打印机的蓝牙配对，确保设备处于已连接状态

3. 处理移动端蓝牙权限与环境要求 #

• 移动端Chrome仅允许HTTPS环境下访问蓝牙设备，本地开发需启动HTTPS服务：ng serve --ssl
• 确保应用已向用户申请蓝牙设备访问权限，Chrome会自动触发授权弹窗，需引导用户点击允许

4. 优化打印机选择逻辑 #

window.prompt易导致输入错误，建议改用下拉选择组件：

// 组件类中添加属性
public printerList: any[] = [];
public selectedPrinter: string = '';

// 初始化时获取打印机列表
async ngOnInit() {
  this.printerList = await this.browserPrint.getAvailablePrinters();
}

模板中添加下拉选择：

<select [(ngModel)]="selectedPrinter">
  <option *ngFor="let printer of printerList" [value]="printer.name">{{printer.name}}</option>
</select>
<button (click)="onPrint()">打印</button>

5. 调试与日志分析 #

• 通过Chrome远程调试工具（连接手机后在桌面Chrome输入chrome://inspect）查看控制台错误，定位蓝牙连接、插件加载等问题
• 调用this.browserPrint.getPrinterInfo()获取打印机详细信息，验证设备是否被正确识别
• 使用Zebra官方ZPL测试工具验证ZPL代码格式正确性

内容的提问来源于stack exchange，提问作者Fridiric