ASP.NET Core Blazor向Zebra打印机打印标签的技术方案问询

问题1：发送ZPL代码到客户端USB打印机的方法 #

1. 浏览器Web Serial API（原生无依赖） #

Blazor通过JS互操作调用浏览器的Web Serial API，直接和USB连接的Zebra打印机通信（多数Zebra USB打印机支持串口模拟模式）。步骤如下：

• 在Blazor组件中注入IJSRuntime，调用自定义JS函数
• JS端代码示例：

async function sendZplToPrinter(zplData) {
  try {
    const port = await navigator.serial.requestPort();
    await port.open({ baudRate: 9600 }); // 匹配打印机实际波特率
    const writer = port.writable.getWriter();
    const encoder = new TextEncoder();
    await writer.write(encoder.encode(zplData));
    writer.releaseLock();
    await port.close();
  } catch (err) {
    console.error('打印失败:', err);
  }
}

• Blazor端调用：

await JS.InvokeVoidAsync("sendZplToPrinter", "^XA^FO50,50^BY3^BCN,100,Y,N^FD123456^FS^XZ");

注意：Web Serial API仅支持HTTPS环境，部分旧浏览器可能不兼容。

2. 本地代理程序 #

如果需要兼容旧浏览器或Web Serial API无法满足需求，可以开发轻量本地代理（比如用.NET WinForms/WPF）：

• 代理程序监听本地TCP端口（如127.0.0.1:8080），通过System.IO.Ports库访问USB打印机
• Blazor通过WebSocket或HTTP POST请求将ZPL数据发送到本地代理，代理再转发给打印机
• 示例代理核心代码（C#）：

using System.IO.Ports;

var port = new SerialPort("COM3", 9600); // 替换为打印机对应的串口
port.Open();
port.Write(zplData); // zplData为Blazor发送的标签指令
port.Close();

3. 开源工具/库 #

可以借助开源串口通信库简化开发：

• 客户端：serialport（Node.js库，可打包为本地服务）
• .NET端：SerialPortStream（增强版串口操作库）

问题2：无需ZPL代码的打印方式 #

1. HTML/CSS + 浏览器原生打印 #

直接在Blazor中构建标签UI，用JS库生成条码，再调用浏览器打印功能：

• 引入JsBarcode到项目，在Blazor组件中生成条码
• 定义打印专用CSS，隐藏页面其他元素，设置标签尺寸
• 示例代码：

<div id="printLabel" style="width: 200px; height: 150px; border: 1px solid #000; padding: 10px;">
  <img id="barcode" />
  <p style="text-align:center;">产品：XX型号</p>
</div>
<button @onclick="PrintLabel">打印标签</button>

@code {
  [Inject] IJSRuntime JS { get; set; }

  async Task PrintLabel() {
    await JS.InvokeVoidAsync("JsBarcode", "#barcode", "123456", new { format = "CODE128", width = 2, height = 80 });
    await JS.InvokeVoidAsync("printTargetElement", "#printLabel");
  }
}

• 配套JS函数：

function printTargetElement(selector) {
  const printContent = document.querySelector(selector).innerHTML;
  const originalContent = document.body.innerHTML;
  document.body.innerHTML = printContent;
  window.print();
  document.body.innerHTML = originalContent;
}

2. 生成PDF后打印 #

使用PDF生成库创建带条码的标签PDF，再在浏览器中打开打印：

• 客户端：用jsPDF + jsBarcode生成PDF，直接在浏览器预览打印
• 服务器端：用iTextSharp或PdfSharp生成PDF，返回给Blazor客户端下载后打印

3. Blazor开源打印组件 #

使用专门的Blazor打印组件（比如BlazorPrint），直接指定打印区域，用Razor语法构建标签UI，组件会自动处理打印样式和预览逻辑，无需手动操作DOM。

内容的提问来源于stack exchange，提问作者Manuel Barrón Santiago