electron+vue 实现静默打印_vue前端实现静默打印

作者：酷酷是懒虫 | 2024-07-10 04:09:29

踩

vue前端实现静默打印

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

我是通过webview实现的。

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

共需要两个文件:一个是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文件，发布打印命令。


<webview
      :src="src"
      ref="webview"
      nodeintegration
      style="position: absolute;right: 200vh;top: 0;"
      :style="{ width: pageSize.with + 'mm', height: pageSize.height + 'mm' }"
    />
 
 
 
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文件位置要放在第四步指定的位置。


<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style></style>
  </head>
 
  <body>
    <div>
<!--$符进行取值-->
        <span>$1</span>
      </table>
    </div>
  </body>
  <style type="text/css">
  </style>
</html>

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/酷酷是懒虫/article/detail/804755