Electron无感打印 静默打印(vue3 + ts + vite)

(electron vue3 项目搭建部分 自行查找其他资源 本文只讲解Electron+vue3 如何实现静默打印)

第一步获取打印机资源

渲染端代码(vue里面)
// 因使用了vite所以在浏览器中打开 require会报错 只能在electron中
const { ipcRenderer } = require( 'electron')
// 初始化打印
async function handleInit() {//  获取到当前所有打印机 (获取以后取打印机NAME 用于electron的deviceName字段)ipcRenderer.invoke("getPrinters").then(res=>{console.log(res)})// 创建要打印的窗口await ipcRenderer.invoke("openPrintWindow",'printId');
} 

第二步 进程端 完善

在electron文件夹目录下新增文件print.ts

// print.ts 
import { app, BrowserWindow, shell, ipcMain, BrowserWindowConstructorOptions, WebContentsPrintOptions } from 'electron'export const electronPrint = () => {let win: BrowserWindow;// 获取系统打印机详情ipcMain.handle("getPrinters", async (event) => {return await event.sender.getPrintersAsync();});// 调用打印机打印ipcMain.handle("printHandlePrint",async (event, options: WebContentsPrintOptions) => {console.log("调用打印了")return new Promise((resolve) => {event.sender.print(options,(success: boolean, failureReason: string) => {console.log("打印的结果",{ success, failureReason })resolve({ success, failureReason });});});});// 创建打印界面ipcMain.handle("openPrintWindow", (_, id) => {// id 用于传递的参数openPrintWindow(id);});// 销毁打印界面ipcMain.handle("destroyPrintWindow", () => {if (win) win.destroy();});function openPrintWindow(id) {const otherWindowConfig: BrowserWindowConstructorOptions = {useContentSize: true,autoHideMenuBar: true,frame: false,show: false,webPreferences: {contextIsolation: false,nodeIntegration: true,webSecurity: false,// 如果是开发模式可以使用devToolsdevTools:true,// 在macos中启用橡皮动画scrollBounce: process.platform === "darwin",},};win = new BrowserWindow({titleBarStyle: "hidden",...Object.assign(otherWindowConfig, {}),});win.loadURL('http://localhost:5173/#/print');win.setMenu(null);win.on("ready-to-show", () => {console.log("打印窗口已经新建出来了  隐藏处理")win.hide();});win.on("closed", () => {win = null;});}
}
在main中调用即可

在这里插入图片描述

第三步 渲染端(vue)调用打印

    onMounted(async()=>{const { ipcRenderer } = require( 'electron')setTimeout(async()=>{ try {await ipcRenderer.invoke("printHandlePrint", { deviceName:"Printer_POS_80",silent: true, // 静默打印pageSize:{width:'72100',height:'210000',},margins: { marginType: "printableArea" }, // 网页的边距});} catch (error) {} finally {await ipcRenderer.invoke("destroyPrintWindow"); // 打印完成销毁新窗口}},1000)})

在这里插入图片描述

常见问题总结

  1. require 报错
    解决:如图所示添加nodeIntegration字段 并且在electron中运行 (浏览器运行会报错)
    在这里插入图片描述

  2. 打印出来内容尺寸不对
    添加pagesize字段 width eight单位是微米 查看你要打印的尺寸设置即可 要打印的页面添加样式 @page{size:auto}
    在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/27162.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

统计信号处理基础 习题解答10-11

题目 我们希望根据一个人的身高来估计他的体重。为了判断其可行性,对N100个人取数据,产生有序的数据对(h,w),其中h代表身高,w代表体重。得到的数据如图10.9(a)所示的。解释你如何利用MMSE估计量根据一个人的身高来猜测他的体重。对于这些数据的建模有些什么样的假设…

RT-thread内核对象的基础应用

RT-thread的内核对象基础应用 启动流程: 以RT-Thread Studio为例,用户程序入口为位于 main.c 文件中 的main 函数。系统启动后先运行startup_stm32f103xe.s文件中的汇编代码,运行“bl entry”指令后跳转到components.c 文件中调用entry函数&a…

WebMvcConfigurer配置不当导致鉴权失败

最近同事说他们有个新需求,需要对接口进行加解密,所以他给项目配置了一个拦截器,但这个拦截器直接导致了每个接口鉴权失败,每次调用接口都是提示没有session信息。 公司内的所有java项目是公用同一套基础依赖,所以我也…

蚂蚁分类信息系统二开仿么么街货源客模板微商货源网源码(带手机版)

源码介绍 网站采用蚂蚁分类信息系统二次开发,模板仿么么街货源客模板,微商货源网定制版。 模板设计风格简洁,分类信息采用列表形式发布,这种设计方式非常符合度娘 SEO 规则。收录效果是杠杠的。 这个网站风格目前是用来做货源推…

【网络安全】【深度学习】【入侵检测】SDN模拟网络入侵攻击并检测,实时检测,深度学习【一】

文章目录 1. 前言2. Mininet 和 Ryu 的区别2.1 Mininet2.2 Ryu2.3 总结 3. 模拟攻击3.1 环境准备3.2 创建 Mininet 网络拓扑3.2 启动 Ryu 控制器3.3 模拟网络攻击3.4 捕获流量 4. 实时异常检测4.1 在 Ryu 控制器中4.2 在 h2 机器上的实验结果4.3 深度学习模型部署上h2机器 帮助…

ArcGIS Pro SDK (三)Addin控件 4 工程项目结构类

25 ArcGIS Pro 自定义项目 目录 25 ArcGIS Pro 自定义项目25.1 添加控件25.2 Code26 ArcGIS Pro 自定义工程项目26.1 添加控件26.2 Code25.1 添加控件 25.2 Code ProCustomItemTest.cs using ArcGIS.Desktop.Core; using ArcGIS.Desktop

分布式文件存储 - - - MinIO从入门到飞翔

MinIO从入门到飞翔 文章目录 MinIO从入门到飞翔0、前言1、分布式文件系统2、MinIO 介绍3、 MinIO安装(docker)4、基本概念5、通过代码上传文件到MinIO6、封装MinIO为starter7、在其他项目中集成封装好的模块 0、前言 对象存储是一种数据存储架构&#x…

互联网应用主流框架整合之SpringMVC基础组件开发

多种传参方式 在前一篇文章互联网应用主流框架整合之SpringMVC初始化及各组件工作原理中讨论了最简单的参数传递,而实际情况要复杂的多,比如REST风格,它往往会将参数写入请求路径中,而不是以HTTP请求参数传递;比如查询…

audio标签隐藏播放器尾部的三个点

问题: 在谷歌浏览器上,展示audio音频控件时,后面有三个点,点击后会显示下载和播放速度,想隐藏这两个控件。 注意: 不是所有版本都有这三个点,甚至有的版本里面三个点里面的控件只有下载。 解…

【Windows10】查看WIFI密码

操作步骤 电脑上查看已连接Wi-Fi的密码的步骤如下: 连接需要查看密码的Wi-Fi。右键点击任务栏上的 [网络] 图标,选择 [开启"网络和Internet"设置]。在 高级网络设置 项目中,点选 [网络和共享中心]。开启网络和共享中心的窗口后,点…

vue打包exe实战记录

vue项目不支持直接打包exe,可以依靠electron进行打包,处理方式是将vue打包的dist文件夹放到electron项目中,通过配置后打包electron.先看下本地环境 下面是实操记录: 1.vue项目打包 vue.config.js中设置项目路径为 module.exports {//publicPath: /chat_pc/, // 前端项目…

苍穹外卖笔记-13-导入地址簿功能代码、用户下单、订单支付

文章目录 1. 导入地址簿功能代码1.1 需求分析和设计1.1.1 产品原型1.1.2 接口设计1.1.3 表设计 1.2 代码导入1.2.1 Mapper层1.2.2 Service层1.2.3 Controller层 1.3 功能测试 2. 用户下单2.1 需求分析和设计2.1.1 产品原型2.1.2 接口设计2.1.3 表设计 2.2 代码开发2.2.1 DTO设计…

Spotify 音乐平台宣布成立内部创意机构,测试生成式人工智能配音广告

Spotify是一家流媒体音乐平台,提供广泛的音乐、播客和视频内容。用户可以通过订阅服务Spotify Premium来享受更多高级功能,如无广告播放、离线听歌等。 Spotify 周四宣布,它将通过其首家名为 Creative Lab 的内部创意机构进一步进军广告领域…

集合查询-并(UNION)集运算、交(INTERSECT)集运算、差(EXCEPT)集运算

一、概述 集合查询是对两个SELECT语句的查询结果进行再进行处理的查询 二、条件 1、两个SELECT语句的查询结果必须是属性列数目相同 2、两个SELECT语句的查询结果必须是对应位置上的属性列必须是相同的数据类型 三、并(UNION)运算 1、语法格式: SELECT 语句1…

Vite - 项目打包从 0 到 1(完美解决打包后访问白屏问题)

目录 开始 修改资源相对地址 引入 vitejs/plugin-legacy 插件并配置 修改打包指令 修改 router 中的 history 前端配置跨域相关 打包后成功访问 开始 修改资源相对地址 在 vite.config.js 文件中配置如下: export default defineConfig({base: ./, //1.打包…

揭秘循环购模式:为何商家愿“送钱”,用户能边消费边赚钱?

大家好,我是你们的电商专家吴军。今天,我将带大家走进一个神秘而又吸引人的商业模式——循环购模式。你可能会疑惑,为什么消费者能在这里“消费1000送2000”,每天还能领取现金并提现?商家真的在“送钱”吗?…

(css)el-tabs滚动按钮浮动问题

(css)el-tabs滚动按钮浮动问题 修改前: 修改后: 思路:找到相应元素,降低层级 css写法: ::v-deep .el-tabs__nav {z-index: 1; }

MySql出现的问题

1.在控制面吧输入mysql显示不是内部命令 2.找到mysql安装的目录,复制目录路径 3.打开系统属性设置环境变量中的Path将路径添加到里面 4.添加好以后将控制面板重新打开输入命令 2.解决安装mysql错误 导致多个mysql服务删除教程 1.用管理员身份打开cmd命令板 2.在…

各地区城乡居民基本养老保险情况数据,Shp+excel格式

基本信息. 数据名称: 各地区城乡居民基本养老保险情况数据 数据格式: Shpexcel 数据几何类型: 面 数据坐标系: WGS84 数据时间:2008-2018年 数据来源:网络公开数据 数据可视化.

Android Studio Koala | 2024.1.1 发布,快来看看有什么更新吧

自从三年前 Android Studio 更改了版本方案之后,从 Arctic Fox 开始每个主要版本都发布一个动物代号,同时版本迭代更新的节奏也越来越快,当然“填坑”的速度和“开坑”的速度几乎也“持平”,可以说每个版本都有痛点,都…