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

前端  /  管理员 发布于 4年前   1906

前言

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

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

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

效果图

使用

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

实现

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

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

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

设置打印机打印

APP.VUE 每次点击打印按钮后触发组件的print方法并将数据传过去 

this.$refs.print.print(row.name)
printer.vue 查询打印机，然后调用打印方法printRender。

 {   
 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  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   
 })   
 
 // 获取节点   
 const webview = this.$refs.printWebview   
 // 发送信息到里的页面   
 webview.send('webview-print-render', {    
 printName: this.printDeviceName,    
 html: this.htmlData   
 })  
 } 
 }}

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

  {   
  // 执行渲染   
  document.getElementById('bd').innerHTML = info.html   
  ipcRenderer.sendToHost('webview-print-do')  
  })
  

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

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

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

global.electronStore = electronStore
})

src/plugins/inject.js

注册$electronStore

// eslint-disable-next-lineimport { 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)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。