前言

成都創(chuàng)新互聯(lián)公司企業(yè)建站,十年網(wǎng)站建設(shè)經(jīng)驗(yàn)，專注于網(wǎng)站建設(shè)技術(shù)，精于網(wǎng)頁設(shè)計(jì)，有多年建站和網(wǎng)站代運(yùn)營經(jīng)驗(yàn)，設(shè)計(jì)師為客戶打造網(wǎng)絡(luò)企業(yè)風(fēng)格，提供周到的建站售前咨詢和貼心的售后服務(wù)。對(duì)于成都網(wǎng)站建設(shè)、網(wǎng)站制作中不同領(lǐng)域進(jìn)行深入了解和探索，創(chuàng)新互聯(lián)在網(wǎng)站建設(shè)中充分了解客戶行業(yè)的需求，以靈動(dòng)的思維在網(wǎng)頁中充分展現(xiàn)，通過對(duì)客戶行業(yè)精準(zhǔn)市場(chǎng)調(diào)研，為客戶提供的解決方案。

electron+vuecli3 實(shí)現(xiàn)設(shè)置打印機(jī)，靜默打印小票功能

網(wǎng)上相關(guān)的資料比較少，這里給大家分享一下，希望大家可以少踩一些坑
github地址

必須要強(qiáng)調(diào)一下的是electron的版本必須是3.0.0不能，我嘗試了4和5都沒有實(shí)現(xiàn)

效果圖

使用

git clone https://github.com/sunnie1992/electron-vue-print-demo.git
npm install
npm run electron:serve

實(shí)現(xiàn)

操作思路
1.用戶點(diǎn)擊打印
2.查詢本地electron-store(用來向本地存儲(chǔ)，讀取數(shù)據(jù))是否存打印機(jī)名稱
3.已經(jīng)設(shè)置，直接打印
4.沒有設(shè)置，彈出設(shè)置打印機(jī)框
5.用戶設(shè)置好確認(rèn)后打印

首頁App.vue引入了兩個(gè)組件，一個(gè)是主動(dòng)設(shè)置打印機(jī)的彈出printDialog

另外一個(gè)是打印組件，打印是通過webview將需要打印的內(nèi)容渲染到html頁面然后就能打印了

APP.VUE 每次點(diǎn)擊打印按鈕后觸發(fā)組件的print方法并將數(shù)據(jù)傳過去 this.$refs.print.print(row.name)
printer.vue 查詢打印機(jī)，然后調(diào)用打印方法printRender。

public/print.html渲染webview頁面成功后發(fā)送打印指令

這里用到了electron-store存取本地?cái)?shù)據(jù)

background.js 引入 初始化掛載在global

import ElectronStore from 'electron-store'
// ElectronStore 默認(rèn)數(shù)據(jù)
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

注冊(cè)$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)

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。