electron实现标签纸打印

需求场景

将饮品以及订单的基本信息打印出来，贴在饮品上（杯贴）

最终效果

示例代码已分享个人码云：https://gitee.com/pearpear/electron-print-demo

安装依赖

yarn add electron-pos-printer@1.3.7

渲染进程核心代码

const getPrinters = async () => {
  const printers = await ipcRenderer.invoke('get-printers'); // 获取打印机列表
  printersList.value = printers;
}

const print = async () => {
  const data = {
    text: "梨的前端小屋"
  }
  await ipcRenderer.invoke('print-recipe', JSON.stringify(data)); // 渲染进程向主进程传递数据必须要序列化
}

主进程核心代码

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

// 获取打印机列表
ipcMain.handle('get-printers', async () => {
  try {
    let printers;
    // 不同版本的electron获取打印机列表的api是不一样的，这里做了兼容处理
    if (typeof mainWindow.webContents.getPrintersAsync === 'function') {
      printers = await mainWindow.webContents.getPrintersAsync();
    } else if (typeof mainWindow.webContents.getPrinters === 'function') {
      printers = mainWindow.webContents.getPrinters();
    } else {
      throw new Error('无法获取打印机列表');
    }
    return printers;
  } catch (error) {
    console.error('获取打印机列表失败:', error);
    throw error;
  }
});

// 打印配方处理
ipcMain.handle('print-recipe', async (event, printContent) => {
  try {
    console.log("打印内容:", printContent);
    const printContentObj = JSON.parse(printContent);
    const data = [];
    data.push({
      type: 'text',
      value: printContentObj.text,
      style: { fontWeight: '500',textAlign: 'center' }
    }, {
      type: 'qrCode',
      value: printContentObj.text,
      position: 'center',
      height: 100,
      width: 100,
    })

    // 打印选项
    const options = {
      preview: false, // 打印预览，如果设为true，只会出现预览窗口，不会打印
      width: '80mm',
      margin: '0', // 完全移除页边距
      copies: 1,
      printerName: "Honeywell PX240S (300 dpi)",
      // 对应打印机的名称，详见获取打印机列表
      timeOutPerLine: 3000, // 减少行间延迟，避免分页
      silent: true,
      pageSize: { height: 150, width: 550 }, // 自定义尺寸（1/100英寸单位）
    };

    // 执行打印
    await PosPrinter.print(data, options);
    console.log('打印成功');
    
    return { success: true };
  } catch (error) {
    console.error('打印失败:', error);
    throw error;
  }
});

注意事项：

1. 获取不到打印机列表，需要检查驱动是否安装
2. Warning: disabling flag–expose wasm due to conflicting flags 重新插拔USB即可
3. 如果一次性打印出来多张，多半是高度没设置对，pageSize适当调整即可
4. preview记得改为false，否则只会出现预览窗口，不会打印
5. 如果报超时的错误，就试着把timeOutPerLine调高一点，比如3000

哦对了，我最近开发了一个叫牛马工作器的chrome拓展插件，很好玩哦，感兴趣的话，给我的公众号回复牛马即可免费获取。

我的微信公众号： 梨的前端小屋