electron+vue静默打印傻瓜式教程

最新推荐文章于 2024-04-21 11:48:20 发布

c.code

最新推荐文章于 2024-04-21 11:48:20 发布

阅读量5.3k

点赞数 5

文章标签： vue 前端 node.js es6 javascript

本文链接：https://blog.csdn.net/weixin_43841400/article/details/103592508

版权

electron静默打印傻瓜式教程

第一步
第二步
第三步
第四步
第五步
- 如果文章对你有帮助，请希望你能随手点个赞支持下！

项目中有大量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>

如果文章对你有帮助，请希望你能随手点个赞支持下！

c.code

关注

5
点赞
踩
14

收藏

觉得还不错? 一键收藏
2
评论
electron+vue静默打印傻瓜式教程

electron静默打印傻瓜式教程第一步第二步第三步第四步第五步如果文章对你有帮助，请希望你能随手点个赞支持下！项目中有大量electron的api，大家可以多去翻翻官方文档，本方案适合electron>=5.0.0第一步配置electron的主线程文件background.jswin = new BrowserWindow({ webPreferences:{ ...
复制链接

扫一扫