我的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文件，发布打印命令。
<webview:src="src"ref="webview"nodeintegrationstyle="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,//静默打印设置为truedeviceName: 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的静默打印。
