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: &