electron静默打印v_13,webview方式的相关配置

使用electron开发应用遇到了打印小票的功能，实现途中还是几经波折。开始选择了c-lodop这个web打印插件，该说不说啊这个用着是挺方便，他们的服务很多东西也完善，web可以直接打印html，静默打印不用弹出浏览器的打印界面，但打印出来的会有c-lodop的水印本页由【试用版打印控件...】。

需要换一种实现了，查到electron有静默打印的方式有两种

第一种：通过window的webcontent对象，使用此种方式需要单独开出一个打印的窗口，可以将该窗口隐藏，但是通信调用相对复杂

第二种：使用页面的webview元素调用打印，可以将webview隐藏在调用的页面中，通信方式比较简单。

第二种比较适合我的场景在electron3.0版本实现还挺简单的例子-这里，强调是electron的版本是3.0，在版本升级中有些功能被关闭了，比如webview，webview中使用node模块等错误报的你很是难受。

接下来展示我报错到最后成功的辛酸历程，我的electron是13，希望能对你有所帮助。

将例子的printer.vue和print.html组件放入你的项目中，放哪可以自己定，print.html可以放到public中方便调用。

background.js
let win = new BrowserWindow({width: 970,height: 800,// fullscreen: true, //全屏// show: false,webPreferences: {contextIsolation:false,     //上下文隔离enableRemoteModule: true,   //启用远程模块nodeIntegration: true, //开启自带node环境webviewTag: true,     //开启webviewwebSecurity: false,allowDisplayingInsecureContent: true,allowRunningInsecureContent: true,},// useContentSize: true,frame: false, //客户端窗口顶部菜单去掉});

print.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><style>body,html {padding: 0;margin: 0;font-size: 30px;}@page {margin: 0px;}.div1 {overflow: hidden;}</style></head><body id="bd" style="padding-left: 5px;box-sizing: border-box;"></body><script>const { ipcRenderer } = require('electron')ipcRenderer.on('webview-print-render', (event, info) => {// 执行渲染console.log(JSON.stringify(info));document.getElementById('bd').innerHTML = info.htmlipcRenderer.sendToHost('webview-print-do')})</script><style>#bd{}</style>
</html>

printer.vue也可以自己写，为了跑通可以直接指定打印机名字，直接调用打印方法

<template><div class="container"><webview id="printWebview" ref="printWebview" :src="fullPath" nodeintegration /></div>
</template>
<script>
import config from "@/utils/config";
let fullPath = '',ipc;
if (config.type != "loc") {const { ipcRenderer } = require("electron");ipc = ipcRenderer;fullPath = '/print.html';// fullPath = path.join(__static, 'print.html');
} else {fullPath = "";
}
export default {name: 'Pinter',components: {data() {return {printDeviceName: '80mm Series Printer',fullPath: fullPath,messageBox: null,htmlData: ''}},mounted() {const webview = this.$refs.printWebview;webview.addEventListener('console-message', e => {//可以打印出webview中所需要打印的内容console.log('webview: ' + e.message);});webview.addEventListener('ipc-message', (event) => {if (event.channel === 'webview-print-do') {webview.print({silent: true,printBackground: true,deviceName: this.printDeviceName},(data) => {this.messageBox.close()if (data) {this.$emit('complete')} else {this.$emit('cancel')}},)}})},methods: {print(val) {this.htmlData = valconsole.log("print");this.printRender();// this.getPrintListHandle()}, printRender(html) {this.messageBox = this.$message({message: '打印中，请稍后',duration: 0})// 获取<webview>节点const webview = this.$refs.printWebview// 发送信息到<webview>里的页面webview.send('webview-print-render', {printName: '80mm Series Printer',html: `小人物有大智慧`})}}
}
</script>
<style scoped>
.container {position: fixed;right: -500px;
}
</style>

一切都好像那么的合理且完美，当我平静的点击了运行

没有node模块，难道... 官网欺骗了我，print.html中不能没有node那ipcRenderer得通信不就不能实现了，直接把地址指向print.html,node模块有，说明webview加载不能获取到node模块，这一顿百度，在一个文章中找到另一个配置参数

遂整之，既出，喜之，疑又现？-？

打印已经进到了print.html的监听中查了下文档webview.print()的结构已经换了

一堆参数，作为一个中本英语水平的我看出了他只有一个参数加第二个报错了，并刀中了最后的返回是个promise，直接就返回成功还是失败了修改下

webview.addEventListener('ipc-message', (event) => {if (event.channel === 'webview-print-do') {webview.print({silent: true,printBackground: true,deviceName: '80mm Series Printer'}).then((res) => {}).catch((err) => {}).finally(() => {this.messageBox.close()});}})

run 走你

之后就是设置模板替换数据了嗯真棒！！！！

electron静默打印v_13,webview方式的相关配置相关推荐

python静默打印pdf_使用electron静默打印
1.使用electron打印的理由很多情况下程序中使用的打印都是用户无感知的.并且想要灵活的控制打印内容,往往需要借助打印机给我们提供的api再进行开发,这种开发方式非常繁琐,并且开发难度较大. e ...
Web框架之Django_01初识（三大主流web框架、Django安装、Django项目创建方式及其相关配置、Django基础三件套：HttpResponse、render、redirect）
阅读目录摘要: Web框架概述 Django简介 Django项目创建 Django基础必备三件套(HttpResponse.render.redirect) 一.Web框架概述: Python三大 ...
Web框架之Django_01初识（三大主流web框架、Django安装、Django项目创建方式及其相关配置、Django基础三件套：HttpResponse、render、redirect）...
摘要: Web框架概述 Django简介 Django项目创建 Django基础必备三件套(HttpResponse.render.redirect) 一.Web框架概述: Python三大主流Web ...
html5静默打印_electron实现静默打印
2020-09-02更新版本比较低,请谨慎使用,我对electron研究比较少,小伙伴们可以加我微信,我有个专门的electron群前言 electron+vuecli3 实现设置打印机,静默打印 ...
vue 实现静默打印、打印预览
近日遇到需求,需要实现静默打印,经过多方百度,发现了露肚皮(Lodop)这个第三方,官网demo. 我们新建一个print文件将他做成组件引入 print.js //==本JS是加载Lodop插件及C ...
electron-vue静默打印2019最新解决方案（含源码）
#####项目环境 node 10.15.3 yarn 1.15.2 win10 代码完成时间2019-4-18 #####废话不多说,先放源码 GitHub https://github.com/ ...
2020-11-05 转载国内配置Electron开发环境的正确方式
原作者: 国内配置Electron开发环境的正确方式 https://blog.yasking.org/a/zh-install-electron-development-2020.html http ...
Python真正实现PDF按顺序静默打印
由于工作需求,需要按照固定顺序打印大量的PDF文件. 第一时间想到的就是用Python的模块来解决.查阅了大量的文章之后,开始了我的测试之旅- 一.第一种方案.ghostscript与gsprint打 ...
java中使用pdfBox打印pdf；java web打印pdf；静默打印；jar程序打包成exe文件；exe4j的使用
java编写打印控件 web打印一直是个棘手的问题,市面上的第三方打印插件也是贵的离谱,这里给出一个可行的解决方案. SpringBoot项目的web服务,实现的功能: 获取电脑可用的打印机列表设置 ...

electron静默打印v_13,webview方式的相关配置

electron静默打印v_13,webview方式的相关配置相关推荐

最新文章

热门文章