如何从浏览器连接热敏打印机并发送ESCPOS打印指令

一、无需厂商SDK的打印实现步骤 #

1. 生成ESCPOS指令流 #

根据ESCPOS标准拼接打印所需的指令（文本格式、换行、切纸、字体调整等），直接用JS转成二进制数据即可：

// 示例：生成带切纸指令的打印数据
function createEscposContent(printText) {
  const ESC = String.fromCharCode(27);
  const GS = String.fromCharCode(29);
  // 拼接文本+换行+切纸指令
  let content = printText + '\n\n';
  content += GS + 'V' + String.fromCharCode(0); // 自动切纸
  // 转成Uint8Array用于发送
  return new TextEncoder().encode(content);
}

2. 发送指令到打印机 #

浏览器直接发起TCP连接受限，推荐两种可行方案：

• 本地WebSocket代理：
  写个轻量Node.js服务，接收网页端的WebSocket请求，再转发TCP指令到打印机（默认端口9100）：

  const WebSocket = require('ws');
  const net = require('net');
  const wss = new WebSocket.Server({ port: 8080 });
  
  wss.on('connection', (ws) => {
    ws.on('message', (printData) => {
      const printerConn = new net.Socket();
      printerConn.connect(9100, '192.168.192.168', () => {
        printerConn.write(printData);
        printerConn.end();
      });
      printerConn.on('close', () => ws.send('打印完成'));
    });
  });
  

  网页端通过WebSocket发送数据：

  const ws = new WebSocket('ws://localhost:8080');
  ws.onopen = () => ws.send(createEscposContent('测试打印内容'));
  

• 浏览器Serial API（仅现代Chrome/Edge）：
  直接通过串口连接USB/串口打印机，无需额外服务：

  async function printWithSerial(escposData) {
    const port = await navigator.serial.requestPort();
    await port.open({ baudRate: 9600 });
    const writer = port.writable.getWriter();
    await writer.write(escposData);
    await writer.close();
    await port.close();
  }
  

二、HTTPS网站访问HTTP本地打印机的解决方案 #

浏览器会拦截HTTPS页面发起的HTTP请求（混合内容限制），可以用以下方式解决：

• 给打印机配置HTTPS：
  如果打印机支持，配置自签名SSL证书，然后在客户端浏览器信任该证书，即可用https://192.168.192.168访问。
• 本地HTTPS代理转发：
  运行一个带自签名证书的Node.js代理服务，网页端发HTTPS请求到代理，代理再转成HTTP请求发给打印机：

  const express = require('express');
  const https = require('https');
  const fs = require('fs');
  const request = require('request');
  const app = express();
  app.use(express.raw());
  
  // 自行生成自签名证书文件
  const sslOptions = {
    key: fs.readFileSync('./private-key.pem'),
    cert: fs.readFileSync('./cert.pem')
  };
  
  app.post('/forward-print', (req, res) => {
    request.post({
      url: 'http://192.168.192.168:9100',
      body: req.body
    }, (err) => err ? res.status(500).send(err) : res.send('打印成功'));
  });
  
  https.createServer(sslOptions, app).listen(8443);
  

  网页端请求示例：

  fetch('https://localhost:8443/forward-print', {
    method: 'POST',
    body: createEscposContent('代理打印测试')
  });
  

• 开发环境临时豁免：
  Chrome浏览器可以开启chrome://flags/#allow-insecure-localhost，允许localhost的不安全请求，仅用于开发，生产环境禁用。

内容的提问来源于stack exchange，提问作者Md. A. A. Apu