前言
electron+vuecli3 实现设置打印机,静默打印小票功能
网上相关的资料比较少,这里给大家分享一下,希望大家可以少踩一些坑
必须要强调一下的是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: