公司项目需要通过电子调用系统打印机,实现打印小票的功能。
<强>电子打印大概有两种:
第一种:通过窗口的webcontent对象,使用此种方式需要单独开出一个打印的窗口,可以将该窗口隐藏,但是通信调用相对复杂。
第二种:使用页面的webview元素调用打印,可以将webview隐藏在调用的页面中,通信方式比较简单。
两个对象调用打印方法的使用方式都一样。
本文是通过第二种方法实现静默打印。
1,要实现打印功能,首先要知道我们的设备上有哪些打印机。方法是:在渲染线程通过电子的ipcRenderer对象发送事件到主线程获取。(本文的渲染线程可以当做为一个打印。vue文件)
(1)主线程(电子。js)伪代码如下:
//引入电子
从“电子”进口电子;//创建一个浏览器对象
const窗口=new electron.BrowserWindow ({
宽度,
高度,
框架:假的,
显示:假的,
写成backgroundColor:“# 4 b5b79”,
minWidth: 1024,
minHeight: 768,
webPreferences: {webSecurity:假},
});//在主线程下,通过ipcMain对象监听渲染线程传过来的getPrinterList事件
electron.ipcMain。(“getPrinterList”,(事件)=比;{//主线程获取打印机列的表
常量列表=window.webContents.getPrinters ();//通过webcontent发送事件到渲染线程,同时将打印机列表也传过去
window.webContents。发送(getPrinterList,列表);
});
===============================================================================
(2)渲染线程(print.vue文件)伪代码如下:
& lt; template>
& lt;/template>
& lt; script>//引入ipcRenderer对象,该对象和主线程的ipcMain通讯
从“电子”进口{ipcRenderer};//渲染线程主动发送getPrinterList事件到主线程请求打印机列的表
ipcRenderer.send (“getPrinterList”);//监听主线程获取到打印机列表后的回调
ipcRenderer。一次(“getPrinterList”,(事件、数据)=比;{//数据就是打印机列的表
这一点。printList=数据;
});
& lt;/script>//获取打印机列表完成
2,(重头戏来了)获取打印机列表后,就需要通过电子自带的标签实现小票排版。是什么?可以把它当做标签,它里面显示的是你需要打印的内容。
(1)使用之前,需要新建一个print.html文件,把你要打印的内容通过打印。html显示出来。我们项目的需求是将要打印的内容通过帆布画出后,再将画布转成图片资源(base64),然后放到里面显示,伪代码如下:
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1.0”比;
& lt;元http-equiv=癤-UA-Compatible”内容=癷e=边缘”比;
& lt; title> Document
& lt; style>//@page样式是用来设置打印机打印出来的样式,例如设置小票外边距样式
@page {
保证金:0 px;
}
& lt;/style>
& lt;/head>
& lt;身体id=癰d”比;
& lt;/body>
& lt; script>//引入ipcRenderer对象
const {ipcRenderer}=要求(“电子”)//监听渲染线程传过来的webview-print-render事件
ipcRenderer。(“webview-print-render”,(事件,deviceInfo)=比;{//动态创建一个img标签,然后插入到& lt; body>中.deviceInfo是渲染线程传过来的数据
让html=";
html=' & lt; img src=" https://www.yisu.com/zixun/$ {deviceInfo.imgSource} "
宽度=" $ {deviceInfo.imgWidth} px”
身高=" $ {deviceInfo.imgHeight} px”祝辞';
. getelementbyid (bd)。innerHTML=html;//当图片插入到页面后,通过ipcRenderer对象的sendToHost方法和渲染线程通讯,告诉渲染线程打印的内容已经准备完毕,请开始打印操作
ipcRenderer.sendToHost (“webview-print-do”);
});
& lt;/script>
& lt;/html>
(2) html文件创建完成后,将print.html引入到。该需要显式的定义在打印。vue文件中,但需要将它用v-show=癴alse”隐藏,不能用v,因为我们需要的dom节点存在于页面上,只是不展示而已。
& lt; script>
安装(){//当vue节点渲染完成后,获取& lt; webview>节点
const webview=efs.printWebview美元;//监听& lt; webview>里面的消息,也就是监听print.html里面的ipcRenderer.sendToHost发送的事件,当该事件发送成功后就会进入下面的回调事件中执行打印操作。
webview。addEventListener (ipc消息,(事件)=比;{
如果事件。频道===webview-print-do) {//如果收到& lt; webview>传过来的事件,名为“webview-print-do”,就执行webview.print打印方法,打印& lt; webview>里面的内容。
webview.print (
{//是否是静默打印
沉默:没错,
printBackground:没错,//打印机的名称,就是本文一开始获得的打印机列表其中一个
设备名称:“xxx”,
}，
(数据)=比;{//这个回调是打印后的回调事件,数据为正确就是打印成功,为假就打印失败
控制台。日志(webview成功,数据);
}，
）;
}
});
}，
& lt;/script>
