MERN栈环境下XP-80C热敏打印机打印报错求助及替代方案

问题描述 #

尝试多个打印库时遇到以下问题：

• printer、electron等库无法通过npm install安装
• 其余库要么抛出非业务代码的内部错误，要么开发环境正常但在Render生产服务器失效
• 使用electron-pos-printer编写打印代码时，抛出错误：

throw new Error(error.message);       
              ^

Error: r.BrowserWindow is not a constructor   
    at C:\Users\Admin\Desktop\coding\Inventory\inventory-app\utils\printReceipt.js:200:15   
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Node.js v18.20.4

当前后端代码：

const { PosPrinter } = require("electron-pos-printer");
const path = require("path");


async function printReceipt(data) {
  try {
    const options = {
      preview: false,
      margin: "0 0 0 0",
      copies: 1,
      printerName: "XP-80C",
      timeOutPerLine: 400,
      pageSize: { width: 80, height: 297 },
      silent: true,
    };

    const {
      items,
    } = data;

    const receiptData = [
      {
        type: "text",
        value: items.length,
        style: `text-align:center;`,
      },
      {
        type: "text",
        value: "\n\n\n",
      },
      // other data
    ];

    PosPrinter.print(receiptData, options)
      .then(console.log)
      .catch((error) => {
        throw new Error(error.message);
      });
  } catch (error) {
    console.log(error);
    throw new Error("Failed to print receipt");
  }
}

module.exports = {
  printReceipt,
};

需要针对MERN栈环境提供代码修改建议或替代方案。

解决方案 #

错误核心原因 #

electron-pos-printer依赖Electron的BrowserWindow API，而MERN栈的后端是纯Node.js服务（包括Render生产服务器），没有Electron的桌面运行环境，因此无法调用该API导致报错。此外，后端服务器无法直接访问客户端的本地打印机，打印逻辑必须放在前端（React）实现。

代码修改建议：前端实现打印 #

将打印逻辑从Node.js后端迁移到React前端，以下是两种可行方案：

方案1：使用浏览器原生打印API

直接利用浏览器内置的window.print()，自定义打印样式：

import React from 'react';

const ReceiptPrinter = ({ items }) => {
  const handlePrint = () => {
    window.print();
  };

  return (
    <div>
      {/* 打印内容容器 */}
      <div className="receipt-content">
        <div style={{ textAlign: 'center', fontSize: '16px' }}>{items.length}</div>
        <br/><br/><br/>
        {/* 补充其他收据内容 */}
      </div>
      <button onClick={handlePrint}>打印收据</button>

      {/* 打印专属样式：仅在打印时生效 */}
      <style media="print">
        {`
          body * { display: none !important; }
          .receipt-content { 
            display: block !important; 
            width: 80mm; 
            margin: 0 auto; 
            padding: 0 10px;
          }
        `}
      </style>
    </div>
  );
};

export default ReceiptPrinter;

方案2：使用React专用打印库react-to-print

react-to-print支持更灵活的打印区域控制和样式定制：

1. 安装依赖：

npm install react-to-print

2. 组件实现：

import React, { useRef } from 'react';
import ReactToPrint from 'react-to-print';

// 定义收据内容组件
const ReceiptContent = ({ items }) => {
  return (
    <div style={{ width: '80mm', padding: '0 10px' }}>
      <div style={{ textAlign: 'center', fontSize: '16px' }}>{items.length}</div>
      <br/><br/><br/>
      {/* 补充其他收据内容 */}
    </div>
  );
};

// 打印触发组件
const ReceiptPrinter = ({ items }) => {
  const contentRef = useRef();

  return (
    <div>
      <ReactToPrint
        trigger={() => <button>打印收据</button>}
        content={() => contentRef.current}
        pageStyle={`
          @page { size: 80mm auto; margin: 0; }
          body { margin: 0; padding: 0; }
        `}
      />
      {/* 隐藏内容容器，仅用于打印 */}
      <div style={{ display: 'none' }}>
        <ReceiptContent ref={contentRef} items={items} />
      </div>
    </div>
  );
};

export default ReceiptPrinter;

后端配套调整 #

删除后端中依赖Electron的打印代码，改为提供收据数据接口：

// Express后端接口示例
app.get('/api/receipt/:id', async (req, res) => {
  try {
    const receipt = await ReceiptModel.findById(req.params.id);
    res.json({ items: receipt.items });
  } catch (error) {
    res.status(500).json({ message: '获取收据数据失败' });
  }
});

特殊场景替代方案：云打印服务 #

如果必须在服务器端触发打印（如无人值守场景），可使用支持API的云打印服务，将打印任务提交至服务后，由关联的客户端打印机执行。该方案需额外配置服务和硬件。

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