电子实现静默打印的示例代码

前言

电子真空3实现设置打印机，静默打印小票功能

网上相关的资料比较少，这里给大家分享一下，希望大家可以少踩一些坑开源代码库地址

必须要强调一下的是电子的版本必须是3.0.0不能，我尝试了四和5都没有实现

效果图

使用

饭桶克隆https://github.com/sunnie1992/electron-vue-print-demo.gitnpm安装程序运行电子：服务器实现

操作思路1.用户点击打印2.查询本地电子存储器（用来向本地存储，读取数据)是否存打印机名称3.已经设置，直接打印4.没有设置，弹出设置打印机框5.用户设置好确认后打印

首页App.vue引入了两个组件，一个是主动设置打印机的弹出打印对话框

另外一个是打印组件，打印是通过网络视图将需要打印的内容渲染到超文本标记语言页面然后就能打印了

模板div id=' app ' El-button type=' primary ' @ click=' showPrint '设置打印机/El-button打印对话框： dialog-visible=' dialogVisible ' @ cancel=' handleprindialog cancel '/Pinter ref=' print ' : HTMl-DATa=' HTMl DATa '/Pinter El-table : DATa=' table DATa ' style=' width : 100% ' El-table-column prop=' date ' label='日期宽度=' 180 '列键='日期'/El-表格-列El-表格-列道具=' 名称“标签=”姓名宽度=' 180 '/El-table-column El-table-column prop=' address ' label='地址/El-表格-列El-表格-列标签='操作模板槽-作用域=' scope ' El-button type=' primary ' @ click=' doPrint(scope。 行)打印/El-button/template/El-table-column/El-table/div/templatescriptionimport { ipcRenderer }来自电子“从导入打印对话框”./components/PrintDialog.vue "从平特导入"。/组件/Pinter。vue ' export default { name: ' App '，components: { Pinter，printDialog }，data(){ return { dialogvisible : false，HtmlData: ' '，printList: []，tabledata :[{ date : ' 2016-05-02 '，name : '我是小仙女，地址： '上海市浦东新区，标签: '家}，{ date: '2016-05-04 '，name: '我是小仙女1 ',地址： '上海市浦东新区，标签: '公司}，{ date: '2016-05-01 '，name: '我是小仙女2 ',地址： '上海市浦东新区，标签: '家}，{ date: '2016-05-03 '，name: '我是小仙女3 ',地址： '上海市浦东新区，标签: '公司}] } }，mounted() { }，methods : { showPrint(){ this。dialogvisible=true }，handlePrintDialogCancel(){ this。dialogvisible=false }，doPrint(row) { this .HtmlData=row.name .参考文献。打印。打印(行。name)} }/script style # app { font-family : ' Avenir '，Helvetica，Arial，无衬线；-网络套件-字体-流畅：抗锯齿；-moz-OSX-字体-平滑：灰度；文本对齐：中心；颜色： # 2c 3e 50边距-top : 60px；}/styleAPP .VUE每次点击打印按钮后触发组件的打印方法并将数据传过去这个参考文献。打印。打印(行。名称)打印机。某视频剪辑软件查询打印机，然后调用打印方法打印渲染。

template div class=' container ' web视图id=' print web view ' ref=' print web view ' : src=' http :完整路径'节点集成/打印对话框：对话框-可见='对话框可见' @ cancel=' handleprint dialog cancel ' @ select-print=' print selectafter '/div/templatescripintimport { ipcRenderer } from ' electron '导入路径from ' path '导入打印对话框from ' ./print对话框。vue ' export default { name : ' Pinter '，components: { printDialog }，prop : {//html data : {//type : String，//default: ' '，/}，}，data() { return { printList: []，dialogVisible: false，printDeviceName: ' '，fullpath : path。join(_ _ static '，print.html .参考文献。打印web视图web视图。addevent listener(' IPC-message '，(event)={ if(event。channel==' web view-print-do '){ console。日志(这个。打印设备名称)web视图。print({ silent : true，printBackground: true，设备名： this。打印设备名称}，(数据)={ this。消息框。关闭()如果(数据){这.$emit('complete') } else { this .$emit('cancel') } }，)} }) }，方法： { print(val){ this。html数据=val this。getprintlisthandle()}，//获取打印机列表getPrintListHandle() { //改用工业程序控制(工业过程控制的缩写)异步方式获取列表，解决打印列数量多的时候导致卡死的问题ipcrenderer。send(' getPrinterList ')ipcrenderer。一次(' getPrinterList '，(事件，数据)={ //过滤可用打印机这个。打印列表=数据。过滤器(元素=元素。状态===0)//1 .判断是否有打印服务如果(这个。打印列表。长度=0){这.$message({ message: '打印服务异常，请尝试重启电脑，键入：“错误”})这一点$ emit(' cancel ')} else { this。检查打印机()} })}，//2 .判断打印机状态checkPrinter() { //本地获取打印机const printerName=this .$ EleStore。get(' print form ')| | ' const printer=this。打印列表。查找(设备=设备。name====printerName)//有打印机设备并且状态正常直接打印if(打印机。打印机。status===0){ this。打印设备名称=printerName this。printrend()} else if(printerName==' '){ this .$message({ message: '请先设置其他打印机，键入：“错误”，duration: 1000，onclose :()={ this。dialogvisible=true } })这一点.$emit('cancel') } else { this .$message({ message: '当前打印机不可用，请重新设置，键入：“错误”，duration: 1000，onclose :()={ this。dialogvisible=true } })，handlePrintDialogCancel() { this .$ emit(' cancel ')此。dialogvisible=false }，printSelectAfter(val){ this。dialogvisible=false this .$ EleStore。set('打印表单'，val。说出)这个。打印设备名称=val。说出这个。print Render()}，print Render(html){ this。消息框=这个.$message({ message: '打印中，请稍后，持续时间： { 0 })//获取网络视图节点const webview=this .$refs.printWebview //发送信息到网络视图里的页面网络视图。发送(' web视图-打印-渲染'，{打印名称： this。打印设备名称，html :这个。HTMl DATa })} }/脚本样式范围。容器{位置： }已修复；右：-500像素；}/stylepublic/print.html渲染网络视图页面成功后发送打印指令

脚本常量{ ipcRenderer }=需要('电子')ipcRenderer。打开(' web视图-打印-渲染'，(事件，信息)={ //执行渲染document.getElementById('bd ').info.html ipcrenderer。send thost(' web view-print-do ')})/脚本这里用到了电子商店存取本地数据

背景。射流研究…引入初始化挂载在全球的

从"电子商店"//电子商店导入电子商店默认数据从""导入电子默认值数据/config/electron-default-data ' let EleStoreApp。on(' ready '，async()={ //初始化配置文件电商商店=新电商商店({ defaults:电商默认数据，CWD 3360应用。getpath(' userData ')})全局。电商商店=电商商店})src/plugins/inject.js

注册$ electronStore

//ESL int-disable-下一行导入{ remote }从电子导出默认值{/* ESL int no-param-reward : ' error ' */install(Vue){ Vue。原型。$ EleSTORE=远程。GetGlobal(' EleSTORE ')} }然后你就可以在某视频剪辑软件文件里读取了

这个$ EleStore。获取(“打印表单”)和这个$ EleStore。set('打印表单'，val.name)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。