html5静默打印_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