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 相关文章推荐
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
Mar 25 Javascript
Ext JS 4官方文档之三 -- 类体系概述与实践
Dec 16 Javascript
面向对象继承实例(a如何继承b问题)(自写)
Jul 01 Javascript
jquery动态增加删除表格行的小例子
Nov 14 Javascript
javascript学习笔记(五)原型和原型链详解
Oct 08 Javascript
JavaScript使用Prototype实现面向对象的方法
Apr 14 Javascript
js实现带按钮的上下滚动效果
May 12 Javascript
JavaScript匿名函数之模仿块级作用域
Dec 12 Javascript
Three.js获取鼠标点击的三维坐标示例代码
Mar 24 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
Jan 13 Javascript
微信小程序实现订单倒计时
Nov 01 Javascript
jstree中的checkbox默认选中和隐藏示例代码
Dec 29 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中HTML标签过滤技巧
2014/01/07 PHP
php开发中的页面跳转方法总结
2015/04/26 PHP
PHP使用GD库制作验证码的方法(点击验证码或看不清会刷新验证码)
2017/08/15 PHP
PHP程序员简单的开展服务治理架构操作详解(一)
2020/05/14 PHP
文本链接逐个出现的js脚本
2007/12/12 Javascript
Node.js实战 建立简单的Web服务器
2012/03/08 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
2013/12/20 Javascript
JS中使用sort结合localeCompare实现中文排序实例
2014/07/23 Javascript
node.js中的fs.fchownSync方法使用说明
2014/12/16 Javascript
javascript 实现 原路返回
2015/01/21 Javascript
JavaScript中String.prototype用法实例
2015/05/20 Javascript
通过实例理解javascript中没有函数重载的概念
2015/06/03 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
2016/05/17 Javascript
jquery+ajax+text文本框实现智能提示完整实例
2016/07/09 Javascript
vue bootstrap小例子一枚
2017/06/09 Javascript
jQuery为某个div加入行样式
2017/06/09 jQuery
JS动态添加元素及绑定事件造成程序重复执行解决
2017/12/07 Javascript
深入理解Node module模块
2018/03/26 Javascript
vue-router的两种模式的区别
2019/05/30 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
python中List的sort方法指南
2014/09/01 Python
Python读写Excel文件方法介绍
2014/11/22 Python
Python设置默认编码为utf8的方法
2016/07/01 Python
python 提取key 为中文的json 串方法
2018/12/31 Python
AUC计算方法与Python实现代码
2020/02/28 Python
Python3之乱码\xe6\x97\xa0\xe6\xb3\x95处理方式
2020/05/11 Python
python三引号如何输入
2020/07/06 Python
jupyter 添加不同内核的操作
2021/02/06 Python
Html5中的桌面通知Notification的实现
2018/09/25 HTML / CSS
黄色火烈鸟:De Gele Flamingo
2019/03/18 全球购物
Currentbody美国/加拿大:美容仪专家
2020/03/09 全球购物
活动总结书
2014/05/08 职场文书
论群众路线学习心得体会
2014/10/31 职场文书
2014年学校体育工作总结
2014/12/08 职场文书
通知的写法
2015/04/23 职场文书
2015年除四害工作总结
2015/07/23 职场文书