electron + vue项目实现打印小票功能及实现代码


Posted in Javascript onNovember 25, 2018

一 需求:

公司项目需要通过electron调用系统打印机,实现打印小票的功能。

二、分析:

electron打印大概有两种:

第一种:通过window的webcontent对象,使用此种方式需要单独开出一个打印的窗口,可以将该窗口隐藏,但是通信调用相对复杂。

第二种:使用页面的webview元素调用打印,可以将webview隐藏在调用的页面中,通信方式比较简单。

两个对象调用打印方法的使用方式都一样。

本文是通过第二种方法实现静默打印。

三、实现过程:

1、要实现打印功能,首先要知道我们的设备上有哪些打印机。方法是:在渲染线程通过electron的ipcRenderer对象发送事件到主线程获取。(本文的渲染线程可以当做为一个print.vue文件)

(1)主线程(electron.js)伪代码如下:

//引入electron
import electron from 'electron';

//创建一个浏览器对象
const window = new electron.BrowserWindow({
  width,
  height,
  frame: false,
  show: false,
  backgroundColor: '#4b5b79',
  minWidth: 1024,
  minHeight: 768,
  webPreferences: { webSecurity: false },
 });
 
//在主线程下,通过ipcMain对象监听渲染线程传过来的getPrinterList事件
electron.ipcMain.on('getPrinterList', (event) => {
  //主线程获取打印机列表
  const list = window.webContents.getPrinters();
  
  //通过webContents发送事件到渲染线程,同时将打印机列表也传过去
  window.webContents.send('getPrinterList', list);
});

===============================================================================

(2)渲染线程(print.vue文件)伪代码如下:

<template>
</template>
<script>
  //引入ipcRenderer对象,该对象和主线程的ipcMain通讯
  import { ipcRenderer } from 'electron';
  
  //渲染线程主动发送getPrinterList事件到主线程请求打印机列表
  ipcRenderer.send('getPrinterList'); 
  
  //监听主线程获取到打印机列表后的回调
   ipcRenderer.once('getPrinterList', (event, data) => {
    //data就是打印机列表
    this.printList = data;
   });
</script>

//获取打印机列表完成

2、(重头戏来了)获取打印机列表后,就需要通过electron自带的标签实现小票排版。 是什么?可以把它当做标签,它里面显示的是你需要打印的内容。

(1)使用之前,需要新建一个print.html文件,把你要打印的内容通过print.html显示出来。我们项目的需求是将要打印的内容通过canvas画出后,再将canvas转成图片资源(base64),然后放到里面显示,伪代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
 //@page样式是用来设置打印机打印出来的样式,例如设置小票外边距样式
  @page {
   margin: 0px;
  }
 </style>
</head>
<body id='bd'>
</body>
<script>
  //引入ipcRenderer对象
 const {ipcRenderer} = require('electron')
 
 //监听渲染线程传过来的webview-print-render事件
 ipcRenderer.on('webview-print-render', (event, deviceInfo) => {
  // 动态创建一个img标签,然后插入到<body>中。deviceInfo是渲染线程传过来的数据
  let html = '';
  html = `<img src="${deviceInfo.imgSource}"
   width="${deviceInfo.imgWidth}px"
   height="${deviceInfo.imgHeight}px">`;
  document.getElementById('bd').innerHTML = html;
  
  //当图片插入到页面后,通过ipcRenderer对象的sendToHost方法和渲染线程通讯,告诉渲染线程打印的内容已经准备完毕,请开始打印操作
  ipcRenderer.sendToHost('webview-print-do');
 });
</script>
</html>

(2)html文件创建完成后,将print.html引入到。该需要显式的定义在print.vue文件中,但需要将它用v-show="false"隐藏,不能用v-if,因为我们需要的dom节点存在于页面上,只是不展示而已。

<script>
mounted() {
  //当vue节点渲染完成后,获取<webview>节点
  const webview = this.$refs.printWebview;
  
  //监听<webview>里面的消息,也就是监听print.html里面的ipcRenderer.sendToHost发送的事件,当该事件发送成功后就会进入下面的回调事件中执行打印操作。
  webview.addEventListener('ipc-message', (event) => {
   if (event.channel === 'webview-print-do') {
    //如果收到<webview>传过来的事件,名为"webview-print-do",就执行 webview.print打印方法,打印<webview>里面的内容。
    webview.print(
     {
      //是否是静默打印
      silent: true,
      printBackground: true,
      //打印机的名称,就是本文一开始获得的打印机列表其中一个
      deviceName: 'xxx',
     },
     (data) => {
      //这个回调是打印后的回调事件,data为true就是打印成功,为false就打印失败
      console.log('webview success', data);
     },
    );
   }
  });
},
</script>

到这里本electron调用打印机的功能就实现了。

总结

以上所述是小编给大家介绍的electron + vue项目实现打印小票功能及实现代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
Apr 29 Javascript
对JavaScript的eval()中使用函数的进一步讨论
Jul 26 Javascript
JavaScript监测ActiveX控件是否已经安装过的代码
Sep 02 Javascript
jquery BS,dialog控件自适应大小
Jul 06 Javascript
jQuery layui常用方法介绍
Jul 25 Javascript
smartupload实现文件上传时获取表单数据(推荐)
Dec 12 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
Oct 31 Javascript
动态加载JavaScript文件的3种方式
May 05 Javascript
vue js秒转天数小时分钟秒的实例代码
Aug 08 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
Dec 30 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
Sep 06 Javascript
vue组件实践之可搜索下拉框功能
Nov 25 #Javascript
详解离线安装npm包的几种方法
Nov 25 #Javascript
vue将单页面改造成多页面应用的方法
Nov 25 #Javascript
vue下拉菜单组件(含搜索)的实现代码
Nov 25 #Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
Nov 25 #Javascript
详解Vue CLI 3.0脚手架如何mock数据
Nov 23 #Javascript
详解js静态检查工具eslint配置文件
Nov 23 #Javascript
You might like
基于PHP编程注意事项的小结
2013/04/27 PHP
PHP内核探索:变量概述
2014/01/30 PHP
php中session定期自动清理的方法
2015/11/12 PHP
异步动态加载JS并运行(示例代码)
2013/12/13 Javascript
js 通用订单代码
2013/12/23 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/25 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
JS组件Bootstrap实现下拉菜单效果代码
2016/04/26 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
2016/12/23 Javascript
Node.js 使用jade模板引擎的示例
2018/05/11 Javascript
js+html5实现手机九宫格密码解锁功能
2018/07/30 Javascript
node.js使用http模块创建服务器和客户端完整示例
2020/02/10 Javascript
解决vue页面刷新,数据丢失的问题
2020/11/24 Vue.js
关于element的表单组件整理笔记
2021/02/05 Javascript
[45:18]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第一场
2018/04/04 DOTA
[07:25]DOTA2-DPC中国联赛2月5日Recap集锦
2021/03/11 DOTA
使用Python进行稳定可靠的文件操作详解
2013/12/31 Python
对于Python编程中一些重用与缩减的建议
2015/04/14 Python
Python Property属性的2种用法
2015/06/21 Python
Python实现随机生成有效手机号码及身份证功能示例
2017/06/05 Python
Python求一批字符串的最长公共前缀算法示例
2019/03/02 Python
Python中一个for循环循环多个变量的示例
2019/07/16 Python
python多线程同步之文件读写控制
2021/02/25 Python
python提取xml里面的链接源码详解
2019/10/15 Python
python的数学算法函数及公式用法
2020/11/18 Python
python中re模块知识点总结
2021/01/17 Python
python-jwt用户认证食用教学的实现方法
2021/01/19 Python
百联网上商城:i百联
2017/01/28 全球购物
莫斯科高科技在线商店:KremlinStore
2019/03/13 全球购物
世界领先的豪华床上用品供应商之一:Bedeck Home
2019/03/18 全球购物
销售类个人求职信范文
2013/09/25 职场文书
家长对孩子评语
2014/01/30 职场文书
2015年教师自我评价范文
2015/03/04 职场文书
python3实现Dijkstra算法最短路径的实现
2021/05/12 Python
python之np.argmax()及对axis=0或者1的理解
2021/06/02 Python