Electron实现静默打印小票

Electron实现静默打印小票

静默打印流程

1.渲染进程通知主进程打印

js 复制代码
//渲染进程 data是打印需要的数据
window.electron.ipcRenderer.send('handlePrint', data)

2.主进程接收消息,创建打印页面

js 复制代码
//main.ts
/* 打印页面 */
let printWindow: BrowserWindow | undefined
/**
 * @Author: yaoyaolei
 * @Date: 2024-06-07 09:27:22
 * @LastEditors: yaoyaolei
 * @description: 创建打印页面
 */
const createPrintWindow = () => {
  return new Promise<void>((resolve) => {
    printWindow = new BrowserWindow({
      ...BASE_WINDOW_CONFIG,
      title: 'printWindow',
      webPreferences: {
        preload: join(__dirname, '../preload/index.js'),
        sandbox: false,
        nodeIntegration: true,
        contextIsolation: false
      }
    })

    printWindow.on('ready-to-show', () => {
      //打印页面创建完成后不需要显示,测试时可以调用show查看页面样式(下面有我处理的样式图片)
      // printWindow?.show()
      resolve()
    })

    printWindow.webContents.setWindowOpenHandler((details: { url: string }) => {
      shell.openExternal(details.url)
      return { action: 'deny' }
    })

    if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
      printWindow.loadURL(`${process.env['ELECTRON_RENDERER_URL']}/print.html`)
    } else {
      printWindow.loadFile(join(__dirname, `../renderer/print.html`))
    }
  })
}

ipcMain.on('handlePrint', (_, obj) => {
   //主进程接受渲染进程消息,向打印页面传递数据
  if (printWindow) {
    printWindow!.webContents.send('data', obj)
  } else {
    createPrintWindow().then(() => {
      printWindow!.webContents.send('data', obj)
    })
  }
})

3.打印页面接收消息,拿到数据渲染页面完成后通知主进程开始打印

js 复制代码
<!doctype html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>打印</title>
  <style>
  </style>
</head>

<body>

</body>
<script>
  window.electron.ipcRenderer.on('data', (_, obj) => {
  //这里是接受的消息,处理完成后将html片段放在body里面完成后就可以开始打印了
  //样式可以写在style里,也可以内联
    console.log('event, data: ', obj);
  //这里自由发挥
    document.body.innerHTML = '处理的数据'
  //通知主进程开始打印
    window.electron.ipcRenderer.send('startPrint')
  })
</script>
</html>

这个是我处理完的数据样式,这个就是print.html

4,5.主进程接收消息开始打印,并且通知渲染进程打印状态

js 复制代码
ipcMain.on('startPrint', () => {
  printWindow!.webContents.print(
    {
      silent: true,
      margins: { marginType: 'none' }
    },
    (success) => {
      //通知渲染进程打印状态
      if (success) {
        mainWindow.webContents.send('printStatus', 'success')
      } else {
        mainWindow.webContents.send('printStatus', 'error')
      }
    }
  )
})

完毕~

相关推荐
你的人类朋友15 分钟前
🤔什么时候用BFF架构?
前端·javascript·后端
知识分享小能手32 分钟前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3
一只小灿灿1 小时前
前端计算机视觉:使用 OpenCV.js 在浏览器中实现图像处理
前端·opencv·计算机视觉
前端小趴菜051 小时前
react状态管理库 - zustand
前端·react.js·前端框架
Jerry Lau1 小时前
go go go 出发咯 - go web开发入门系列(二) Gin 框架实战指南
前端·golang·gin
我命由我123452 小时前
前端开发问题:SyntaxError: “undefined“ is not valid JSON
开发语言·前端·javascript·vue.js·json·ecmascript·js
0wioiw02 小时前
Flutter基础(前端教程③-跳转)
前端·flutter
落笔画忧愁e2 小时前
扣子Coze纯前端部署多Agents
前端
海天胜景2 小时前
vue3 当前页面方法暴露
前端·javascript·vue.js
GISer_Jing2 小时前
前端面试常考题目详解
前端·javascript