打印方法为使用electorn的webview元素调用打印
一:获取打印机列表
在 主线程 获取设备已连接的打印机列表
import { ipcMain, BrowserWindow } from 'electron'
const window = new BrowserWindow({...})
// 监听获取打印机列表事件
ipcMain.on('getPrinterList', event => {
// 主线程获取打印机列表
const list = window.webContents.getPrinters()
// 通过webContents发送事件到渲染线程,同时将打印机列表也传过去
window.webContents.send('getPrinterList', list)
})
二:在渲染层获取打印机列表并检查设备是否正常
import { ipcRenderer } from 'electron'
export default{
methods: {
// 检查打印机是否正常
checkMachine() {
return new Promise((resolve, reject) => {
//渲染线程主动发送getPrinterList事件到主线程请求打印机列表
ipcRenderer.send('getPrinterList')
//监听主线程获取到打印机列表后的回调
ipcRenderer.once('getPrinterList', (event, data) => {
//data就是打印机列表
// 判断是否有需要的打印机设备,用打印机名称判断
const item = data.find(item => item.name === 'example')
if (!item) {
reject('没找到打印机')
} else if (item.status !== 0) {
reject('无法连接打印机')
} else {
resolve()
}
})
})
}
}
}
三:编辑打印模板
模板是使用html编写的,因为使用electron-vue-template做项目模板,所有静态资源都放在static目录下
关于vue electron static可以查看
<!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>Document</title>
<style>
//@page样式是用来设置打印机打印出来的样式,例如设置小票外边距样式
@page {
margin: 0px;
}
</style>
</head>
<body id='bd'>
</body>
<script>
//引入ipcRenderer对象
const {ipcRenderer} = require('electron')
//监听渲染线程传过来的webview-print-render事件
ipcRenderer.on('webview-print-render', (event, deviceInfo) => {
// 动态创建一个img标签,然后插入到<body>中。deviceInfo是渲染线程传过来的数据
let html = '';
html = `<p>${deviceInfo.text}</p>`;
document.getElementById('bd').innerHTML = html;
//当图片插入到页面后,通过ipcRenderer对象的sendToHost方法和渲染线程通讯,告诉渲染线程打印的内容已经准备完毕,请开始打印操作
ipcRenderer.sendToHost('webview-print-do');
});
</script>
</html>
四:测试打印
<template>
<div>
<webview
id="print"
ref="print"
v-show="false"
:src="printTmelate"
nodeintegration
/>
</div>
</template>
import { ipcRenderer } from 'electron'
export default{
data() {
return {
printTmelate: 'static/printer-template/test.html' // 第三部编写的html文件
}
}
methods: {
// 打印门票
async hanldePrintTicket(info) {
const webview = this.$refs.print
const that = this
try {
// 第二步判断连接设备是否成功
await this.checkMachine()
// 发送信息到html打印
webview.send('webview-print-render', {
text: 'test'
})
// 监听打印事件
this.webviewPrint(webview)
.then(() => {
// 处理打印成功逻辑
})
.catch(error => {
// 处理打印失败逻辑
})
} catch (error) {
// 处理连接打印机失败
}
},
// 监听html模板传过来的事件
webviewPrint(webview) {
return new Promise((resolve, reject) => {
webview.addEventListener('ipc-message', async event => {
if (event.channel === 'webview-print-do') {
webview
.print({
// 是否是静默打印
silent: true,
printBackground: true,
// 打印机的名称,就是本文一开始获得的打印机列表其中一个
deviceName: 'example'
})
.then(() => {
resolve()
})
.catch(error => {
console.log(error)
})
}
})
})
}
}
}