2020-09-02更新 版本比较低，请谨慎使用，我对electron研究比较少，小伙伴们可以加我微信，我有个专门的electron群

前言

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

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

github地址

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

效果图

使用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

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

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)

}

}

}

#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;

}

APP.VUE 每次点击打印按钮后触发组件的print方法并将数据传过去 this.$refs.print.print(row.name)

printer.vue 查询打印机，然后调用打印方法printRender。

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

})

// 获取节点

const webview = this.$refs.printWebview

// 发送信息到里的页面

webview.send('webview-print-render', {

printName: this.printDeviceName,

html: this.htmlData

})

}

}

}

.container {

position: fixed;

right: -500px;

}

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

const { ipcRenderer } = require('electron')

ipcRenderer.on('webview-print-render', (event, info) => {

// 执行渲染

document.getElementById('bd').innerHTML = info.html

ipcRenderer.sendToHost('webview-print-do')

})

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

background.js 引入 初始化挂载在globalimport 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)

关于我

获取更多技术相关文章，关注公众号”前端女塾“，加我微信或加入”前端仙女群“。

如果对你有帮助送我一颗小星星(づ￣3￣)づ╭❤～