electron+vue静默打印傻瓜式教程
electron静默打印傻瓜式教程第一步第二步第三步第四步第五步如果文章对你有帮助,请希望你能随手点个赞支持下!项目中有大量electron的api,大家可以多去翻翻官方文档,本方案适合electron>=5.0.0第一步配置electron的主线程文件background.jswin = new BrowserWindow({webPreferences:{...
·
项目中有大量electron的api,大家可以多去翻翻官方文档,本方案适合electron>=5.0.0
第一步
配置electron的主线程文件background.js
win = new BrowserWindow({
webPreferences:{
nodeIntegration:true, //允许渲染线程使用node模块
webSecurity: false, //允许跨域
webviewTag :true //允许使用webview标签
}
})
ipcMain.on('getPrinterDefaultName', (event) => {
//监听获取获取默认打印机名称
const list = win.webContents.getPrinters();
let name = ''
for(let item of list){
item.isDefault && (name = item.name)
}
//console.log(name)
event.returnValue = name;
});
第二步
在项目中创建一个js文件,作为写一个vue插件
export default {
install(Vue, options) {
Vue.prototype.$Printer = {
webview:null, //webview的dom对象
bindIpcMessage:function(){
Vue.nextTick(() => {
//界面渲染完成后获取dom对象,并绑定ipc-message监听事件
this.webview = document.querySelector("webview")
this.webview.addEventListener("ipc-message",async event => {
if (event.channel == "pong") {
//调用静默打印
await this.webview.print({
//是否是静默打印,true为静默打印,false会弹出打印设置框
silent: true,
printBackground: true,
deviceName: require('electron').ipcRenderer.sendSync('getPrinterDefaultName')
});
}
});
});
},
printPage(printHtml){
//发起打印api,printHtml为打印的dom
this.webview.send("ping", printHtml)
}
}
}
}
第三步
在main.js引入第二步插件
import Printer from './print/xxxxx.js';
Vue.use(Printer);
第四步
在app.vue中使用
<template>
<div id="app">
<router-view/>
<webview style="width:0;height:0;" :src="html" nodeintegration></webview>
</div>
</template>
export const absPath = fileNameOrFolder => {
//获取根目录,开发环境与安装环境区别
const path = require('path')
return path.join(process.resourcesPath,
(process.env.NODE_ENV == 'development' ?
`../../../../${fileNameOrFolder}` : `../${fileNameOrFolder}`))
}
data() {
return {
html:absPath('print/print.html')
}
},
created(){
//初始化监听,然后在你想用的地方调用this.$Printer.printPage()传入你想打印的dom结构
this.$Printer.bindIpcMessage()
}
第五步
在项目根目录下创建存放webview使用的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>print</title>
<script>
const { ipcRenderer } = require('electron')
ipcRenderer.on('ping', (e, ele) => { //接收响应
document.querySelector('body').innerHTML = ele;
ipcRenderer.sendToHost('pong','ok') //向webview所在页面的进程传达消息
})
</script>
</head>
<body></body>
</html>
如果文章对你有帮助,请希望你能随手点个赞支持下!
更多推荐
已为社区贡献2条内容
所有评论(0)