记一次Electron+vue实现动态打印小票

Nic_LittleCow

已于 2022-11-29 16:17:01 修改

阅读量3.4k

点赞数 1

分类专栏：前端bug记录文章标签： electron vue.js

于 2022-07-26 13:33:58 首次发布

本文链接：https://blog.csdn.net/qq_52965813/article/details/125992424

版权

前端bug记录专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.业务场景

公司有做一个Electron+Vue的收银产品，收银以后需要将订单信息通过小票打印出来，记录一下做这个需求遇到的一些问题跟bug

2.解决思路

通过webview或者新窗口将需要打印的内容渲染，然后通过webcontents.print这个api将页面内容输出到小票机然后静默打印

3.代码实现

3.1 渲染进程触发打印

这个代码使用vue3+electron实现，但是为了方便项目的维护以及解决前期web页面更新客户端也需要更新的问题，客户端代码跟webPage被我架构成了两个项目，所以这里的ipc是通过window来暴露出来。点击打印的时候将配置以及需要打印的数据传到主进程。

// 处理点击打印的事件
const handlePrint = () => {
    const { ipcRenderer } = window.require('electron')
    ipcRenderer.invoke("my-print", JSON.stringify({
        option: {
            silent: true,
            deviceName: store.state?.config?.defaultLittlePrinter,
            printBackground: true,
            margins: {
                marginType: "none"
            },
            scaleFactor: 80,
        },
        data: {
            orderDetail: state.orderDetail
        }
    }));
}

3.2 主进程接收事件并处理

主进程接收这个my-print 的事件之后开始创建窗口

ipcMain.handle('my-print', (event, params) => {
    this.createPrintWindow(JSON.parse(params))
});

创建窗口的createPrintWindow代码

createPrintWindow(params) {
    // 实例化一个窗口出来
    this.printWindow = new BrowserWindow({
      width: 150,
      minHeight: 100,
      frame: false,
      skipTaskbar: true,
      transparent: true,
      resizable: false,
      show: false,  //不要让窗口显示出来
      webPreferences: {
        contextIsolation: false,
        webviewTag: true,
        nodeIntegration: true,
        webSecurity: false,
      }
    })
    // 让窗口去加载webPage里面的某个路由
    this.printWindow.loadURL("http://localhost:3001/#/print")
    // 页面加载完成了就可以执行打印的流程了
    this.printWindow.once('ready-to-show', async () => {
      setTimeout(() => {
        this.printWindow.webContents.send('getPrinterData', params.data.orderDetail);
      }, 100);
      setTimeout(() => {
        this.printWindow.webContents.print(params.option, (success: boolean, failureReason: string) => {
          this.printWindow.destroy()
          this.printWindow = null
        })
      }, 1000);
    })
  }

被加载的那个locahost:3001/print 代码

<script setup>
import { ref } from "vue"
import { useStore } from "vuex"
const store = useStore()
const orderDetail = ref()
const { ipcRenderer } = window.require("electron")
ipcRenderer.once("getPrinterData", (event, data) => {
    orderDetail.value = data
});
</script>

这里直接用了两个定时器来保证加载页面时数据能被接收到以及打印时页面能被渲染完成，虽然是笨方法，但是主要还是实现功能为主。一开始想的是mainWindow页面跟printWindow的页面都是一个项目可以直接使用vuex来保存，但是创建了新窗口之后，新窗口的vuex是重新实例化出来的，获取不到值，然后就直接通过ipc传到主进程再打印时将数据传回Print页面。不过怎么传数据不是很重要，你甚至可以通过localStorage，数据库等持久化一个数据打印之后再删除都行。