说真的,刚接触electron,踩了不少的坑,不同版本的electron配置不一样的!!导致在百度过程中,参照他们的写法,往往没起作用,最后发现是版本不一致导致的!EXE安装包放在文章后面。
为什么要用到ws?这里内容主要是用WebSocket来传输打印的,所以这里搭建了一个WebSocketServer;ws地址:ws://127.0.0.1:15978。 先看一下效果图:
首先创建窗口:
new BrowserWindow({
width: 800,
height: 600,
icon: ".\\src\\assets\\img\\logo.png",
autoHideMenuBar: true, //是否隐藏菜单栏
webPreferences: {
contextIsolation: false,
nodeIntegration: true,
webSecurity: false, // 取消跨域限制
webviewTag: true, // 是否启用 <webview> tag标签
enableRemoteModule: true,
},
});
复制代码
第一个坑:icon参数,路径问题 看了网上一些教程,可以把ison配置在package.json里面,但是我这个版本怎么试都没有效果;如果放到BrowserWindow里面,没有双斜杆打包不会显示;这里的vue脚手架是用4点多版本搭建的,最后摸索出,可以把icon放到vue.config.js,打包之后果然生效:
pluginOptions: {
electronBuilder: {
builderOptions: {
appId: 'electron-app',
productName: 'huanggua',
win: {
icon: 'public/favicon.ico'
},
nsis: {
oneClick: false, // 是否一键安装
allowToChangeInstallationDirectory: true // 允许修改安装目录
}
}
},
}
复制代码
第二个坑:页面是否能调用node的一些方法和electron方法,这里有两个个关键参数nodeIntegration和contextIsolation 这里如果nodeIntegration不设置为true,contextIsolation不设置为false,页面用window.require('electron')回发生报错,参考了文档,那时候这里搞了半天才弄好,也不算是坑吧,没怎么看文档。。。
第三个坑:enableRemoteModule参数,不同版本有差异
第四个坑:webview标签,首先要在主窗口把标签开启,这个标签里面要调用electron方法,还要在标签加上nodeintegration和contextIsolation参数,要不在主窗口加上都没用:
<webview style="height: 100%;" ref="printWebview" src="print.html" nodeintegration webpreferences="contextIsolation=false" />
复制代码
1、获取打印机列表
background.js
ipcMain.on('getPrinterList', (event) => {
//主线程获取打印机列表
const list = browerWin.webContents.getPrinters();
//通过webContents发送事件到渲染线程,同时将打印机列表也传过去
browerWin.webContents.send('getPrinterList', list);
});
复制代码
print.vue
const getIpcRendererPrinter = () => {
//渲染线程主动发送getPrinterList事件到主线程请求打印机列表
ipcRenderer.send('getPrinterList');
//监听主线程获取到打印机列表后的回调
ipcRenderer.once('getPrinterList', (event, data) => {
//data就是打印机列表
console.log(data);
printList.value = data || [];
const localPrintName = localStorage.getItem('localPrintName');
if (data && data.length && !localPrintName) {
leftForm.printer = data[0].displayName;
localStorage.setItem('localPrintName', data[0].displayName);
}
if (localPrintName) {
leftForm.printer = localPrintName;
}
console.log(leftForm);
console.log(printList);
});
}
复制代码
这里只要原理是把打印的内容HTML放到webview里面,然后调用打印
printWebview.value.print({
//是否是静默打印
silent: true,
// printBackground: true,
//打印机的名称,就是本文一开始获得的打印机列表其中一个
deviceName: printer,
})
.then(data => {
console.log('webview success', data);
ipcRenderer.send('printSucces', true);
})
.catch(e => {
console.log('webview error', e);
ipcRenderer.send('printSucces', false);
});
复制代码
页面调用: 安装软件完毕,打开软件
html,内容可以自定义
<div
class="body-right-preview"
:style="{
width: canvasDesignConfig.width + canvasDesignConfig.unit,
height: canvasDesignConfig.height + canvasDesignConfig.unit,
}"
>
<previewDesign
:designConfig="canvasDesignConfig"
:fillData="fillData"
ref="printDesign"
/>
</div>
复制代码
js,链接WebSocket
const _this = this
const clientWebsock = new WebSocket(`ws://127.0.0.1:15978`);
clientWebsock.onmessage = function(e) {
console.log("接受消息:", e);
if (e && e.data && count > 0) {
count = count - 1;
_this.electronPrint("again");
}
};
clientWebsock.onclose = function(e) {
console.log("连接关闭", e);
};
clientWebsock.onopen = function() {
console.log("连接成功");
};
// 连接发生错误的回调方法
clientWebsock.onerror = function(e) {
console.log("连接错误", e);
};
this.clientWebsock = clientWebsock
复制代码
打印
const printDesignRef = this.$refs.printDesign;
const htmlContent = printDesignRef.$el.outerHTML
this.clientWebsock.send(htmlContent);
复制代码
原网址: 访问
创建于: 2023-08-09 19:07:38
目录: default
标签: 无
未标明原创文章均为采集,版权归作者所有,转载无需和我联系,请注明原出处,南摩阿彌陀佛,知识,不只知道,要得到
java windows火焰图_mob64ca12ec8020的技术博客_51CTO博客 - 在windows下不可行,不知道作者是怎样搞的 监听SpringBoot 服务启动成功事件并打印信息_监听springboot启动完毕-CSDN博客 SpringBoot中就绪探针和存活探针_management.endpoint.health.probes.enabled-CSDN博客 u2u转换板 - 嘉立创EDA开源硬件平台 Spring Boot 项目的轻量级 HTTP 客户端 retrofit 框架,快来试试它!_Java精选-CSDN博客 手把手教你打造一套最牛的知识笔记管理系统! - 知乎 - 想法有重合-理论可参考 安宇雨 闲鱼 机械键盘 客制化 开贴记录 文本 linux 使用find命令查找包含某字符串的文件_beijihukk的博客-CSDN博客_find 查找字符串 ---- mac 也适用 安宇雨 打字音 记录集合 B站 bilibili 自行搭建 开坑 真正的客制化 安宇雨 黑苹果开坑 查找工具包maven pom 引用地 工具网站 Dantelis 介绍的玩轴入坑攻略 --- 关于轴的一些说法 --- 非官方 ---- 心得而已 --- 长期开坑更新 [本人问题][新开坑位]关于自动化测试的工具与平台应用 机械键盘 开团 网站记录 -- 能做一个收集的程序就好了 不过现在没时间 -- 信息大多是在群里发的 - 你要让垃圾佬 都去一个地方看难度也是很大的 精神支柱 [超级前台]sprinbboot maven superdesk-app 记录 [信息有用] [环境准备] [基本完成] [sebp/elk] 给已创建的Docker容器增加新的端口映射 - qq_30599553的博客 - CSDN博客 [正在研究] Elasticsearch, Logstash, Kibana (ELK) Docker image documentation elasticsearch centos 安装记录 及 启动手记 正式服务器 39 elasticsearch 问题合集 不断更新 6.1.1 | 6.5.1 两个版本 博客程序 - 测试 - bug记录 等等问题 laravel的启动过程解析 - lpfuture - 博客园 OAuth2 Server PHP 用 Laravel 搭建带 OAuth2 验证的 RESTful 服务 | Laravel China 社区 - 高品质的 Laravel 和 PHP 开发者社区 利用Laravel 搭建oauth2 API接口 附 Unauthenticated 解决办法 - 煮茶的博客 - SegmentFault 思否 使用 OAuth2-Server-php 搭建 OAuth2 Server - 午时的海 - 博客园 基于PHP构建OAuth 2.0 服务端 认证平台 - Endv - 博客园 Laravel 的 Artisan 命令行工具 Laravel 的文件系统和云存储功能集成 浅谈Chromium中的设计模式--终--Observer模式 浅谈Chromium中的设计模式--二--pre/post和Delegate模式 浅谈Chromium中的设计模式--一--Chromium中模块分层和进程模型 DeepMind 4 Hacking Yourself README.md update 20211011
Laravel China 简书 知乎 博客园 CSDN博客 开源中国 Go Further Ryan是菜鸟 | LNMP技术栈笔记 云栖社区-阿里云 Netflix技术博客 Techie Delight Linkedin技术博客 Dropbox技术博客 Facebook技术博客 淘宝中间件团队 美团技术博客 360技术博客 古巷博客 - 一个专注于分享的不正常博客 软件测试知识传播 - 测试窝 有赞技术团队 阮一峰 语雀 静觅丨崔庆才的个人博客 软件测试从业者综合能力提升 - isTester IBM Java 开发 使用开放 Java 生态系统开发现代应用程序 pengdai 一个强大的博主 HTML5资源教程 | 分享HTML5开发资源和开发教程 蘑菇博客 - 专注于技术分享的博客平台 个人博客-leapMie 流星007 CSDN博客 - 舍其小伙伴 稀土掘金 Go 技术论坛 | Golang / Go 语言中国知识社区
最新评论