electron-vue静默打印2019最新解决方案（含源码）

#####项目环境
node 10.15.3
yarn 1.15.2
win10
代码完成时间2019-4-18
#####废话不多说，先放源码

GitHub

https://github.com/951477037/electron-print

git clone https://github.com/951477037/electron-print.git

//安装依赖
yarn
//运行项目
yarn run dev
//打包项目
yarn run build

目录结构

先在主进程 /src/main/index.js

//引入ipcMain
import {app,BrowserWindow,ipcMain
} from 'electron'

在createWindow方法里添加以下代码，获取打印机列表

  //在主线程下，通过ipcMain对象监听渲染线程传过来的getPrinterList事件ipcMain.on('getPrinterList', (event) => {//在主线程中获取打印机列表const list = mainWindow.webContents.getPrinters();//通过webContents发送事件到渲染线程，同时将打印机列表也传过去mainWindow.webContents.send('getPrinterList', list);});

接下来在LandingPage.vue中也就是渲染进程中添加一下代码

const ipcRenderer = require("electron").ipcRenderer;

//使用ipcRenderer与主进程通信，并获取返回值
ipcRenderer.send("getPrinterList");
//监听主线程获取到打印机列表后的回调
ipcRenderer.once("getPrinterList", (event, data) => {
//data就是打印机列表
console.log(data);
});

输出结果如下

重点来了！！！
在static中新建一个print.html文件（如果你害怕打包后会找不到的话，我在最后会提供一个方法不知道你看得仔不仔细），如下图所示

如果不在static中新建的话会报错（具体原因我明没有深入去研究）

<!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"><script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script><title>Document</title><style>@page {margin: 0;}.a {padding-left: 100px;}</style>
</head><body><div id='app'><div class="a" v-for="v in arr">{{v}}</div></div>
</body>
<script>//引入ipcRenderer对象const {ipcRenderer} = require('electron')new Vue({el: "#app",data: {arr: []},mounted() {ipcRenderer.on('ping', (e, arr) => { //接收响应console.log(e)console.log(arr)this.arr = arr;ipcRenderer.sendToHost('pong') //向webview所在页面的进程传达消息})},methods: {}})
</script></html>

创建完成，回到LandingPage.vue中添加以下代码
注意两个参数

silent  是否静默打印
deviceName  打印机名字

把deviceName换成你自己的打印机名字

<template><div><webview src="../../../static/print.html" nodeintegration></webview></div>
</template><script>
const ipcRenderer = require("electron").ipcRenderer;
export default {name: "landing-page",components: {},data() {return {print0: "",print1: ""};},mounted() {this.getPrinterList(); //首先先获取this. print();},methods: {print() {const webview = document.querySelector("webview");console.log(webview);webview.addEventListener("dom-ready", () => {console.log("dom-ready");//dom-ready---webview加载完成webview.openDevTools(); //这个方法可以打开print.html的控制台var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 11, 12, 13, 14];//在send时将arr传递过去webview.send("ping", arr); //向webview嵌套的页面响应事件});webview.addEventListener("ipc-message", event => {console.log(event.channel); // Prints "pong" 在此监听事件中接收webview嵌套页面所响应的事件if (event.channel == "pong") {console.log("通信成功");webview.print({//是否是静默打印,true为静默打印，false会弹出打印设置框silent: true,printBackground: true,//打印机的名称，this.print1为在getPrinterList()方法中获取到的打印机名字。//注意在demo中这是我打印机的设备，在使用本demo时，先去getPrinterList()中找到你使用的打印机deviceName: this.print1},data => {//这个回调是打印后的回调事件，data为true就是打印成功，为false就打印失败console.log("webview success", data);});}});},getPrinterList() {ipcRenderer.send("getPrinterList");//监听主线程获取到打印机列表后的回调ipcRenderer.once("getPrinterList", (event, data) => {//data就是打印机列表this.print0 = data[3].name;this.print1 = data[5].name;console.log(data[3].name);console.log(data[5].name);});}}
};
</script><style>
</style>

运行代码

打包的方法！！！
打包前在package.json中修改

"win": {      "icon": "build/icons/icon.ico",      "extraResources": "./static/*.html"    },

打包后，electron-print\build\win-ia32-unpacked\resources中就会存在static

static中

如果觉得有用请点个赞，转发请注明来源，谢谢

electron-vue静默打印2019最新解决方案（含源码）相关推荐

2019最新财务管理计算器源码
2019最新财务计算器源码第一次写博客,不喜勿喷! 分享原码,逻辑并不严谨,仅供谈论使用! 预览效果: 1.可以根据月份统计,或者历史收入统计计算. 2.支持持久化到本地Excel: 2.1:Exc ...
微信小程序+VUE食堂订餐点餐系统(含源码+论文+答辩PPT等)
项目功能简介: 该项目含有源码.论文等资料.配套开发软件.软件安装教程.项目发布教程等本系统包含微信小程序前台和Java做的后台管理系统,该后台采用前后台前后分离的形式使用Java+VUE 微信小程 ...
推荐一款基于Vue的开源智慧物业解决方案项目源码
项目介绍「e家宜业」是一整套基于AGPL开源协议开源的智慧物业解决方案.实现了微信公众号.小程序.PC.H5.智能硬件多端打通,旨在提升物业公司效率.规范物业服务流程.提升物业服务满意度.加强小区智 ...
B站云E办Springboot+vue——前端项目完整版（含源码）
一.项目简介项目背景:受疫情的影响,许多企业由线上办公转为线下办公.随着线上办公的人数的增多,线上办公的优点逐步凸显:通过实现工作流程的自动化.节省企业办公费用.实现绿色办公,同时提升办公效率. 项 ...
前后端分离架构一直没机会实战？1周完成Vue+Core WebApi移动商城实战(含源码)！...
疫情让企业受到重创! 就业形势更加严峻! 前后端分离架构成了当下最高频的招聘需求还没实战过前后端分离? 花3分钟阅读本文, 带你全面了解前后端分离,轻松面试拿高薪! Web发展至今技术非常成熟,主流 ...
非常全面的数字人解决方案(含源码)
github TheRamU/Fay: 语音互动,直播自动带货虚拟数字人 (github.com) gitee fay: 这是一个数字人项目,包含python内核及ue数字人模型,可以用于做数字助理 ...
vue商城项目源码_CMS全栈项目之Vue和React篇（下）（含源码）
今天给大家介绍的主要是我们全栈CMS系统的未讲解完的后台部分和前台部分,如果对项目背景和技术栈不太了解,可以查看我之前的文章基于nodeJS从0到1实现一个CMS全栈项目(上) 基于nodeJS从0 ...
C#调用斑马打印机打印条码标签(含源码)(支持COM、LPT、USB、TCP连接方式和ZPL、EPL、CPCL指令)
在批量打印商品标签时一般都要加上条码或图片,而这类应用大多是使用斑马打印机,所以我也遇到了怎么打印的问题. 一种办法是用标签设计软件做好模板,在标签设计软件中打印,这种办法不用写代码,但对我来说觉得不 ...
【Chrome浏览器插件开发】浏览器插件运行机制03之实战使用Vue.js 3 + Vite 2开发出简易的浏览器插件(含源码）
文章目录知识点: 一.使用 vite 创建项目 1.1 环境搭建 1.2 安装vite工具 1.3 创建vite项目 1.4 进入项目并安装依赖 1.5 修改端口 1.6 运行项目二.创建项目资源 ...

electron-vue静默打印2019最新解决方案（含源码）

electron-vue静默打印2019最新解决方案（含源码）相关推荐

最新文章

热门文章