前言
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页面然后就能打印了
<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="/UploadFiles/2021-04-02/fullPath">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)
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。