electron+vue 实现静默打印功能
更新时间：2023年06月25日 15:57:43 作者：_文和_
这篇文章主要介绍了electron+vue 实现静默打印功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
我的electron版本：^12.0.0; vue版本：^3.2.13。
我是通过webview实现的。
实现原理：webview类似于iframe，其实是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的静默打印。
到此这篇关于electron+vue 实现静默打印的文章就介绍到这了,更多相关electron+vue静默打印内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue mixins组件复用的几种方式（小结）,vue中提供了一种混合机制mixins，用来更高效的实现组件内容的复用,有兴趣的可以了解一下2017-09-09
这篇文章主要介绍了Vue一个案例引发的递归组件的使用，本文主要给大家展示如何在项目中使用递归组件，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-11-11
最近领导交我一个项目是使用 vue-cli 搭建的单页面应用。下面小编通过本文给大家介绍vue将单页面改造成多页面应用的方法 ，感兴趣的朋友一起看看吧2018-11-11
这篇文章主要介绍了vue 卸载eslint方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要为大家详细介绍了vue实现两个区域滚动条同步滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
这篇文章主要介绍了vue中多附件上传的实现示例，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-04-04
这篇文章主要介绍了用vue构建多页面应用的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了Vue.js特性Scoped Slots的浅析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
Font Awesome是一套流行的图标字体库,我们在实际开发的过程中会经常遇到需要使用图标的场景,对于一些常用的图标,我们可以直接在Font Awesome中找到并且使用,这篇文章主要给大家介绍了关于Vue开发项目中如何使用Font Awesome5的相关资料,需要的朋友可以参考下2021-11-11
vue+elementUi 实现密码显示/隐藏+小图标变化功能
这篇文章主要介绍了vue+elementUi 实现密码显示/隐藏+小图标变化功能,需本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2020-01-01
最新评论