Electron 使用打印机

最新推荐文章于 2024-08-09 14:09:02 发布

w_231210

最新推荐文章于 2024-08-09 14:09:02 发布

阅读量1.2k

点赞数

文章标签： electron vue.js

本文链接：https://blog.csdn.net/w_231210/article/details/132567385

版权

1.问题：开发时使用打印机打印小票

2.开发环境： electron12 + vue2 + node14

{
    "electron": "^12.2.3",
    "vue": "^2.6.12",
    "node": "^14.21.3"
}

3.问题解决：

使用原生自带的 webview.print

1): src/renderer/view/index.vue

// index.vue

<template>
  <webview style="height: 100%;" 
    id="printWebview" 
    ref="printWebview" 
    :src="fullPath" 
    nodeintegration
    webpreferences="contextIsolation=no" />
</template>
<script>
import { ipcRenderer } from 'electron'
export default {
  name: 'Pinter',
  data() {
    return {
      fullPath: path.join(__static, 'pm.html'),
    }
  },
  mounted() {
    let t = this
    const webview = this.$refs.printWebview;
    ipcRenderer.on('getPrinterList', (event, data) => {//获取打印机列表
      data.map((item) => {
        if (item.isDefault) {//获取默认打印机
          t.printerObj = item
        }
      })
    })
    webview.addEventListener('ipc-message', (event) => {//监听ipc-message方法
      if (event.channel === 'webview-print-do') {
        webview.print({
          silent: true,
          printBackground: true,
          deviceName: t.printerObj.displayName //打印机名称
        }).then((res) => {
          console.log(res)
        }).catch((err) => {
          console.log(err)
        }).finally();
      }
    })
    this.printRender()
  },
  methods: {
    printRender() {//发送 webview-print-render 打印数据和打印
      let t = this
      let html=`<div>1</div>`
      // 获取<webview>节点
      const webview = this.$refs.printWebview
      // 发送信息到<webview>里的页面
      webview.send('webview-print-render', {//发送
        printName: t.printerObj.displayName,
        html: html
      })
    }
  }
}
</script>

2) src/main/main.js

  //获取打印机
  ipcMain.on('getPrinterList', (event) => {
    //主线程获取打印机列表
    const list = mw.webContents.getPrinters();
    //通过webContents发送事件到渲染线程，同时将打印机列表也传过去
    mw.webContents.send('getPrinterList', list);
  });

3）public/pm.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
</head>
<body id="bd" style="padding:15px 5px;box-sizing: border-box;">
</body>
<script>
  const { ipcRenderer } = require('electron')
  ipcRenderer.on('webview-print-render', (event, info) => {
    // 执行渲染
    console.log(info);
    document.getElementById('bd').innerHTML = info.html
    ipcRenderer.sendToHost('webview-print-do')
  })
</script>
</html>

打印机如果无法打印可以看看是否是驱动未装