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 相关文章推荐
jquery pagination插件实现无刷新分页代码
Oct 13 Javascript
TextArea 控件的最大长度问题(js json)
Dec 16 Javascript
表单切换,用回车键替换Tab健(不支持IE)
Jul 20 Javascript
js自执行函数的几种不同写法的比较
Aug 16 Javascript
JQuery设置和去除disabled属性的5种方法总结
May 16 Javascript
jQuery Ajax中的事件详细介绍
Apr 16 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
May 06 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
Jun 25 Javascript
javascript获取重复次数最多的字符
Jul 08 Javascript
理解javascript函数式编程中的闭包(closure)
Mar 08 Javascript
详解vue 配合vue-resource调用接口获取数据
Jun 22 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
Dec 25 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
一个ftp类(ini.php)
2006/10/09 PHP
基于mysql的论坛(6)
2006/10/09 PHP
浅析Dos下运行php.exe,出现没有找到php_mbstring.dll 错误的解决方法
2013/06/29 PHP
YII模块实现绑定二级域名的方法
2014/07/09 PHP
PHP中的switch语句的用法实例详解
2015/10/21 PHP
微信支付PHP SDK之微信公众号支付代码详解
2015/12/09 PHP
PHP常见漏洞攻击分析
2016/02/21 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
ThinkPHP5.0多个文件上传后找不到临时文件的修改方法
2018/07/30 PHP
js变量作用域及可访问性的探讨
2006/11/23 Javascript
JQuery 技巧和窍门整理(8个)
2010/04/22 Javascript
jQuery 锚点跳转滚动条平滑滚动一句话代码
2010/04/30 Javascript
js实现文章文字大小字号功能完整实例
2014/11/01 Javascript
JS实现窗口加载时模拟鼠标移动的方法
2015/06/03 Javascript
jQuery实现鼠标经过事件的延时处理效果
2020/08/20 Javascript
基于node.js依赖express解析post请求四种数据格式
2017/02/13 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
2017/12/18 Javascript
[43:35]TI4 循环赛第二日Liquid vs Fnatic
2014/07/11 DOTA
python通过函数属性实现全局变量的方法
2015/05/16 Python
python去除字符串中的换行符
2017/10/11 Python
快速了解Python中的装饰器
2018/01/11 Python
python如何压缩新文件到已有ZIP文件
2018/03/14 Python
python 读取文件并替换字段的实例
2018/07/12 Python
python dlib人脸识别代码实例
2019/04/04 Python
python写入数据到csv或xlsx文件的3种方法
2019/08/23 Python
Python+Opencv身份证号码区域提取及识别实现
2020/08/25 Python
CSS3中的Media Queries学习笔记
2016/05/23 HTML / CSS
详解HTML5通讯录获取指定多个人的信息
2016/12/20 HTML / CSS
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
2017/07/24 HTML / CSS
采用冷却技术的超自然舒适度:GhostBed床垫
2018/09/18 全球购物
2014年中班元旦活动方案
2014/02/14 职场文书
上课玩手机的检讨书
2014/10/01 职场文书
2015年办公室文秘工作总结
2015/04/30 职场文书
铁人观后感
2015/06/16 职场文书
《金色的草地》教学反思
2016/02/17 职场文书
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android