electron实现静默打印的示例代码


Posted in Javascript onAugust 12, 2019

前言

electron+vuecli3 实现设置打印机,静默打印小票功能

网上相关的资料比较少,这里给大家分享一下,希望大家可以少踩一些坑
github地址

必须要强调一下的是electron的版本必须是3.0.0不能,我尝试了4和5都没有实现

效果图

electron实现静默打印的示例代码

electron实现静默打印的示例代码

使用

git clone https://github.com/sunnie1992/electron-vue-print-demo.git
npm install
npm run electron:serve

实现

操作思路
1.用户点击打印
2.查询本地electron-store(用来向本地存储,读取数据)是否存打印机名称
3.已经设置,直接打印
4.没有设置,弹出设置打印机框
5.用户设置好确认后打印

首页App.vue引入了两个组件,一个是主动设置打印机的弹出printDialog

electron实现静默打印的示例代码

另外一个是打印组件,打印是通过webview将需要打印的内容渲染到html页面然后就能打印了

<template>
 <div id="app">
  <el-button type="primary" @click="showPrint">设置打印机</el-button>
  <printDialog :dialog-visible="dialogVisible" @cancel="handlePrintDialogCancel" />
  <pinter ref="print" :html-data="HtmlData"></pinter>
  <el-table :data="tableData" style="width: 100%">
   <el-table-column prop="date" label="日期" width="180" column-key="date">
   </el-table-column>
   <el-table-column prop="name" label="姓名" width="180">
   </el-table-column>
   <el-table-column prop="address" label="地址">
   </el-table-column>
   <el-table-column label="操作">
    <template slot-scope="scope">
     <el-button type="primary" @click="doPrint(scope.row)">打印</el-button>
    </template>
   </el-table-column>
  </el-table>
 </div>
</template>
<script>
import { ipcRenderer } from 'electron'
import printDialog from './components/PrintDialog.vue'
import Pinter from './components/pinter.vue'
export default {
 name: 'App',
 components: {
  Pinter,
  printDialog
 },
 data() {
  return {
   dialogVisible: false,
   HtmlData: '',
   printList: [],
   tableData: [{
    date: '2016-05-02',
    name: '我是小仙女',
    address: '上海市浦东新区',
    tag: '家'
   }, {
    date: '2016-05-04',
    name: '我是小仙女1',
    address: '上海市浦东新区',
    tag: '公司'
   }, {
    date: '2016-05-01',
    name: '我是小仙女2',
    address: '上海市浦东新区',
    tag: '家'
   }, {
    date: '2016-05-03',
    name: '我是小仙女3',
    address: '上海市浦东新区',
    tag: '公司'
   }]
  }
 },
 mounted() {
 },
 methods: {
  showPrint() {
   this.dialogVisible = true
  },
  handlePrintDialogCancel() {
   this.dialogVisible = false
  },
  doPrint(row) {
   this.HtmlData = row.name
   this.$refs.print.print(row.name)
  }
 }
}
</script>

<style>
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

APP.VUE 每次点击打印按钮后触发组件的print方法并将数据传过去 this.$refs.print.print(row.name)
printer.vue 查询打印机,然后调用打印方法printRender。

<template>
 <div class="container">
  <webview id="printWebview" ref="printWebview" :src="fullPath" nodeintegration />
  <printDialog :dialog-visible="dialogVisible" @cancel="handlePrintDialogCancel" @select-print="printSelectAfter" />
 </div>
</template>
<script>
import { ipcRenderer } from 'electron'
import path from 'path'
import printDialog from './PrintDialog.vue'
export default {
 name: 'Pinter',
 components: {
  printDialog
 },
 props: {
  // HtmlData: {
  //  type: String,
  //  default: '',
  // },
 },
 data() {
  return {
   printList: [],
   dialogVisible: false,
   printDeviceName: '',
   fullPath: path.join(__static, 'print.html'),
   messageBox: null,
   htmlData: ''
  }
 },

 mounted() {
  const webview = this.$refs.printWebview
  webview.addEventListener('ipc-message', (event) => {
   if (event.channel === 'webview-print-do') {
    console.log(this.printDeviceName)
    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 = val
   this.getPrintListHandle()
  },
  // 获取打印机列表
  getPrintListHandle() {
   // 改用ipc异步方式获取列表,解决打印列数量多的时候导致卡死的问题
   ipcRenderer.send('getPrinterList')
   ipcRenderer.once('getPrinterList', (event, data) => {
    // 过滤可用打印机
    this.printList = data.filter(element => element.status === 0)
    // 1.判断是否有打印服务
    if (this.printList.length <= 0) {
     this.$message({
      message: '打印服务异常,请尝试重启电脑',
      type: 'error'
     })
     this.$emit('cancel')
    } else {
     this.checkPrinter()
    }
   })
  },
  // 2.判断打印机状态
  checkPrinter() {
   // 本地获取打印机
   const printerName = this.$electronStore.get('printForm') || ''
   const printer = this.printList.find(device => device.name === printerName)
   // 有打印机设备并且状态正常直接打印
   if (printer && printer.status === 0) {
    this.printDeviceName = printerName
    this.printRender()
   } else if (printerName === '') {
    this.$message({
     message: '请先设置其他打印机',
     type: 'error',
     duration: 1000,
     onClose: () => {
      this.dialogVisible = true
     }
    })
    this.$emit('cancel')
   } else {
    this.$message({
     message: '当前打印机不可用,请重新设置',
     type: 'error',
     duration: 1000,
     onClose: () => {
      this.dialogVisible = true
     }
    })

   }
  },

  handlePrintDialogCancel() {
   this.$emit('cancel')
   this.dialogVisible = false
  },
  printSelectAfter(val) {
   this.dialogVisible = false
   this.$electronStore.set('printForm', val.name)
   this.printDeviceName = val.name
   this.printRender()
  },
  printRender(html) {
   this.messageBox = this.$message({
    message: '打印中,请稍后',
    duration: 0
   })
   // 获取<webview>节点
   const webview = this.$refs.printWebview
   // 发送信息到<webview>里的页面
   webview.send('webview-print-render', {
    printName: this.printDeviceName,
    html: this.htmlData
   })
  }
 }
}
</script>
<style scoped>
.container {
 position: fixed;
 right: -500px;
}
</style>

public/print.html渲染webview页面成功后发送打印指令

<script>
  const { ipcRenderer } = require('electron')
  ipcRenderer.on('webview-print-render', (event, info) => {
   // 执行渲染
   document.getElementById('bd').innerHTML = info.html
   ipcRenderer.sendToHost('webview-print-do')
  })
 </script>

这里用到了electron-store存取本地数据

background.js 引入 初始化挂载在global

import ElectronStore from 'electron-store'
// ElectronStore 默认数据
import electronDefaultData from './config/electron-default-data'
let electronStore
app.on('ready', async() => {
 // 初始化配置文件
 electronStore = new ElectronStore({
  defaults: electronDefaultData,
  cwd: app.getPath('userData')
 })
 global.electronStore = electronStore
})

src/plugins/inject.js

注册$electronStore

// eslint-disable-next-line
import { remote } from 'electron'
export default {
 /* eslint no-param-reassign: "error" */
 install(Vue) {
  Vue.prototype.$electronStore = remote.getGlobal('electronStore')
 
 }
}

然后你就可以在vue文件里读取了

this.$electronStore.get('printForm') 和 this.$electronStore.set('printForm', val.name)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
推荐40个简单的 jQuery 导航插件和教程(下篇)
Sep 14 Javascript
前端开发过程中浏览器版本的两种判定方法
Oct 30 Javascript
js修改原型的属性使用介绍
Jan 26 Javascript
a标签的href与onclick事件的区别详解
Nov 12 Javascript
Bootstrap学习笔记之css样式设计(2)
Jun 07 Javascript
浅谈JavaScript对象与继承
Jul 10 Javascript
javascript中this用法实例详解
Apr 06 Javascript
Vue学习之路之登录注册实例代码
Jul 06 Javascript
简单的Vue异步组件实例Demo
Dec 27 Javascript
Vue模板语法中数据绑定的实例代码
May 17 Javascript
JS实现简单随机3D骰子
Oct 24 Javascript
JavaScript进制转换实现方法解析
Jan 18 Javascript
微信小程序 弹窗输入组件的实现解析
Aug 12 #Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
Aug 12 #Javascript
ElementUI radio组件选中小改造
Aug 12 #Javascript
Vue 3.0 前瞻Vue Function API新特性体验
Aug 12 #Javascript
微信小程序实现页面分享onShareAppMessage
Aug 12 #Javascript
react实现antd线上主题动态切换功能
Aug 12 #Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
Aug 12 #Javascript
You might like
深入解析php中的foreach问题
2013/06/30 PHP
分析PHP中单双引号的误区和双引号小隐患
2016/07/19 PHP
详解PHP数据压缩、加解密(pack, unpack)
2016/12/17 PHP
php 调用ffmpeg获取视频信息的简单实现
2017/04/03 PHP
让innerText在firefox火狐和IE浏览器都能用的写法
2011/05/14 Javascript
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
2013/07/08 Javascript
Javascript中引用示例介绍
2014/02/21 Javascript
JavaScript中的包装对象介绍
2015/01/27 Javascript
jquery实现叠层3D文字特效代码分享
2015/08/21 Javascript
jquery实现漂亮的二级下拉菜单代码
2015/08/26 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
2016/05/23 Javascript
基于JS实现无缝滚动思路及代码分享
2016/06/07 Javascript
100多个基础常用JS函数和语法集合大全
2017/02/16 Javascript
Vue 创建组件的两种方法小结(必看)
2018/02/23 Javascript
详解Angular模板引用变量及其作用域
2018/11/23 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
2019/07/23 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
2020/05/12 Javascript
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
[42:25]EG vs Spirit Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
Python BeautifulSoup中文乱码问题的2种解决方法
2014/04/22 Python
基于Django contrib Comments 评论模块(详解)
2017/12/08 Python
Numpy掩码式数组详解
2018/04/17 Python
解决Mac下使用python的坑
2019/08/13 Python
Python 动态变量名定义与调用方法
2020/02/09 Python
html5使用canvas画空心圆与实心圆
2014/12/15 HTML / CSS
Reebok官方旗舰店:美国知名健身品牌锐步
2019/01/07 全球购物
Blank NYC官网:夹克、牛仔裤等
2020/12/16 全球购物
Miller Harris官网:英国小众香水品牌
2020/09/24 全球购物
历史系毕业生自荐信
2013/10/28 职场文书
教师实习自我鉴定
2013/12/18 职场文书
党委领导班子整改方案
2014/09/30 职场文书
领导干部整治奢华浪费之风思想汇报
2014/10/07 职场文书
2014旅游局党组书记党建工作汇报材料
2014/11/02 职场文书
《杜鹃的婚约》OP主题曲「凸凹」无字幕影像公开
2022/04/08 日漫
Android实现图片九宫格
2022/06/28 Java/Android
MySQL性能指标TPS+QPS+IOPS压测
2022/08/05 MySQL