electron+vue 实现静默打印

我的electron版本：^12.0.0; vue版本：^3.2.13。

我是通过webview实现的。

实现原理：webview类似于iframe，其实是electron中的一个内嵌窗口，打印的也就是这个内嵌窗口的内容。

那么就需要一个html作为内嵌内容。所以共需要两个文件:一个是vue文件，主要承担数据预处理工作；第二个是html文件，主要承担显示打印内容工作。两个文件直接通讯，并没有通过主进程。

唯一需要主进程和渲染进程通讯的是获取打印机列表。

开始正式开发.........................

第一步：在backgroud.js中打开webview，electron5.0后默认停用webview，所以需要在配置文件中配置为默认开启。

  const win = new BrowserWindow({
    width: 1920,
    height: 1080,
    fullscreen: true,//全屏显示
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      webviewTag: true, // 允许使用 webview 标签
    },
    frame: false, //客户端窗口顶部菜单去掉
  });

第二步：vue.config.js中设置html加载器，如果不设置，项目启动后会报无法加载html文件。

首先使用 npm install html-loader，然后再进行配置。

  chainWebpack: (config) => {
    config.module.rule()
      .test(/\.html$/)
      .use('html-loader')
      .loader('html-loader')
  },

第三步：主进程和渲染进程通讯，获取打印机列表。

//主进程
import {ipcMain } from "electron";
  
ipcMain.on("getPrintList", () => {
    win.webContents.send("printList", win.webContents.getPrinters());
  });

//渲染进程
import { ipcRenderer } from "electron";

getPrintList() {
  ipcRenderer.send("getPrintList");
  ipcRenderer.once("printList", (event, data) => {
     this.printlist = data; //printList需要在data中预定义，printlist: []。返回的data就是打印机列表
  });
},

第四步：vue文件的处理，主要工作包括：数据的预处理，引用html文件，发布打印命令。

import raw from "@/views/components/print/print.html?raw";//此处就是html文件地址
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
import { ipcRenderer } from "electron";

  data() {
    return {
      printlist: [], //上一步需要预定义的打印机列表
      src: "",
      pageSize: {
        with: 210,
        height: 297,
      },
    };
  },

methods：{
//数据处理，注意传递数据的方式：$为key，后为数据。
handleData(){
     this.src = URL.createObjectURL(
        new Blob(
          [
            raw
              .replace("$1", "数据测试")
          ],
          {
            type: "text/html",
          }
        )
      );
    },

//打印，自定义一个button调用函数即可进行打印
    print() {
      let webview = this.$refs.webview;//首先通过ref获取webview标签
      let deviceName = "";//设置默认打印机
      for (let index = 0; index < this.printlist.length; index++) {
        if (this.printlist[index].isDefault) {
          deviceName = this.printlist[index].name;//遍历打印机集合，将默认打印机名字赋值给deviceName
        }
      }
      ElMessage({
        message: "即将使用打印机   "+deviceName,
        grouping: true,
        type: "success",
      });
      if (this.printlist.length) {
        webview.print({
          silent: true,//静默打印设置为true
          deviceName: deviceName,
          margins: {
            marginType: "none",
          },
          pageRanges: [{ from: 0, to: 0 }],
          pageSize: "A4",
        });
      } else {
        message.error("请连接打印机");
      }
    },
}

第五步：html文件的编写。html文件位置要放在第四步指定的位置。

  
    
    
    
    
    
  

  
    


        $1
      
    
  
  

通过以上五步，即可实现electron的静默打印。