位置: IT常识 - 正文

electron实现打印功能,支持静默打印、无感打印(electron静默打印)

编辑:rootadmin
electron实现打印功能,支持静默打印、无感打印 electron实现打印功能,支持静默打印、无感打印实现思路

推荐整理分享electron实现打印功能,支持静默打印、无感打印(electron静默打印),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:electron如何打包,electron 调用打印机,electron 打印pdf,electron 打印小票,electron 打印小票,electron 打印,electron 调用打印机,electron 打印插件,内容如对您有帮助,希望把文章链接给更多的朋友!

业务上目前有两种打印的方法:

webview标签:electron提供webview用于在一个独立的 frame 和进程里显示外部 web 内容。但是在Electron >= 5中是禁用该标签的,所以就直接放弃它。webContent.print方法:webCompent是主进程用来渲染和控制网页的对象,而它的print方法是用来打印渲染进程中的网页内容。这里我们选择这个方法。

总体思路大概为:

在页面点击打印按钮,发布订阅去创建一个隐藏的新窗口,窗口内容就是我们要打印的内容。利用新窗口展示的路径的hash和打印页面路由相互匹配实现指定打印内容。在打印页面初始化后,需要窗口去掉标题的按钮,防止乱入到打印页面。然后在根据路由传递的参数查找数据渲染页面。 再然后发布printHandlePrint事件进行打印并设置静默打印和去除边距。最后打印完成发布destroyPrintWindow事件销毁新窗口。实现1、创建打印方法

使用ipcMain.handle向主进程订阅打印相关事件。其中printHandlePrint订阅就是调用打印机的方法。最重要的是openPrintWindow订阅,它的内部去调用了openPrintWindow方法,它的用处就是用于创建一个新的BrowserWindow窗口,将要打印的内容放进新窗口中,这样我们就可以实现打印指定内容的功能。destroyPrintWindow订阅作用于销毁创建的新窗口。

可以看到openPrintWindow会接受两个参数,第一个参数是事件对象,第二个参数是发布事件时传递的参数,而这个参数最终会通过路由的方式传递到打印的新窗口中。实现渲染进程和渲染进程的伪通信。

方法写好之后记得要在app.whenReady()后调用这个方法。

// printHandle.tslet win: BrowserWindow;export function usePrintHandle() {  // 获取系统打印机详情  ipcMain.handle("getPrinters", async (event) => {    return await event.sender.getPrintersAsync(); });  // 调用打印机打印  ipcMain.handle(    "printHandlePrint",    async (event, options: WebContentsPrintOptions) => {      return new Promise((resolve) => {        event.sender.print(          options,         (success: boolean, failureReason: string) => {            resolve({ success, failureReason });         }       );     });   } );  // 创建打印界面  ipcMain.handle("openPrintWindow", (_, id) => {    // id 用于传递的参数    openPrintWindow(id); });  // 销毁打印界面  ipcMain.handle("destroyPrintWindow", () => {    if (win) win.destroy(); });}​// index.tsapp.whenReady().then(()=>{  usePrintHandle();})2、创建新的BrowserWindow窗口

首先这个创建新窗口的函数会在openPrintWindow订阅中触发,也就是在点击了打印按钮时触发。所以会判断时候存在这个新窗口,如果存在就要隐藏并销毁掉,这样可以保证我们每次点击打印按钮时都会是最新的隐藏的窗口。

electron实现打印功能,支持静默打印、无感打印(electron静默打印)

然后需要在ready-to-show事件中将新窗口隐藏掉,这样做的好处是这个新窗口一直都是隐藏的,从而实现无感打印。

最后有一个问题就是如何将打印的数据添加到新的窗口中,可以通过新窗口实例对象的loadURL方法,这个方法传递一个我们要展示内容的路径。从printURLCustom方法中可以看到路径就是项目打包根页面,而后面的hash就是我们路由的hash模式路由。 所以我们可以写一个print组件,然后为这个组件增加print路由。这样我们打开的新窗口显示就是print组件的内容。

而openPrintWindow订阅的参数会作为路由的query参数拼接到路径上面,print组件就可以拿到点击组件打印传递的参数。

// router.ts{path: "/print",name: "打印",component: () => import("@renderer/views/print/index.vue")},// path.ts/** * 获取真正的地址 * * @param {string} devPath 开发环境路径 * @param {string} proPath 生产环境路径 * @param {string} [hash=""] hash值 * @param {string} [search=""] search值 * @return {*} {string} 地址 */function getUrl(  devPath: string,  proPath: string,  hash: string = "",  search: string = ""): string {  const url = isDev    ? new URL(`http://localhost:${process.env.PORT}`)   : new URL("file://");  url.pathname = isDev ? devPath : proPath;  url.hash = hash;  url.search = search;  return url.href;}export const printURLCustom = (id) =>  getUrl("",join(__dirname, "..", "renderer", "index.html"),`#/print?id=${id}`);​// printHandle.tslet win: BrowserWindow;const otherWindowConfig: BrowserWindowConstructorOptions = {  height: 595,  useContentSize: true,  width: 1140,  autoHideMenuBar: true,  minWidth: 842,  frame: false,  show: false,  webPreferences: {    contextIsolation: false,    nodeIntegration: true,    webSecurity: false,    // 如果是开发模式可以使用devTools    devTools: process.env.NODE_ENV === "development",    // 在macos中启用橡皮动画    scrollBounce: process.platform === "darwin", },};export function openPrintWindow(id) {  if (win) {    win.hide(); /*测试*/    win.destroy();    return; }  win = new BrowserWindow({    titleBarStyle: "hidden",    ...Object.assign(otherWindowConfig, {}), });  win.loadURL(printURLCustom(id));  win.setMenu(null);  win.on("ready-to-show", () => {    win.hide(); });  win.on("closed", () => {    win = null; });}​3、创建点击打印组件

这里是通过ipcRenderer渲染进程携带参数发布openPrintWindow事件。这里需要注意的是ipcRenderer要使用commonjs引入,否则会报错TypeError: path.join is not a function. 但是浏览器不支持commonjs,所以非常不建议在浏览器上跑这个项目。

<template> <div @click=print>打印</div></template><script lang="ts" setup>  const { ipcRenderer } = require("electron"); // 浏览器环境报错  const onPrint = async () => { await ipcRenderer.invoke("openPrintWindow", 123123); // 创建新窗口并传递数据 };</script>4、创建打印组件

在打印新窗口时虽然设置了frame:false,但是标题的关闭、最小化这些按钮还存在,导致打印也会把按钮打印到页面。我没有找到完美的解决办法,所以直接删除了DOM。

参数可以通过route.query拿到点击打印按钮传递的参数。

通过ipcRenderer渲染进程发布printHandlePrint事件,传递参数为的打印机配置。其中启用了静默打印和去除打印页面边距。

静默打印是指用默认的打印机打印出所有页并且不希望弹出对话框进行设置,所以在打印的时候要设置好系统默认打印机。

最后在打印完成时发布destroyPrintWindow事件,销毁掉打印新窗口。

<template> <div>我要被打印了</div></template><script lang="ts" setup>  import { useRoute } from "vue-router";  import { ref, onMounted } from "vue";    const { ipcRenderer } = require("electron"); // 浏览器环境报错    const route = useRoute();  const id = route.query.id as string; // 接收参数​  onMounted(async () => {    const windowTitle = window.document.querySelector(".window-title ");    windowTitle && windowTitle.remove(); // 删除顶部标题关闭按钮    // await getDataApi(id); // 获取数据    try {      await ipcRenderer.invoke("printHandlePrint", {        silent: true, // 静默打印        margins: { marginType: "none" }, // 网页的边距     });   } catch (error) {   } finally {      await ipcRenderer.invoke("destroyPrintWindow"); // 打印完成销毁新窗口   } });</script>

如有错误,请在底部留言。

本文链接地址:https://www.jiuchutong.com/zhishi/282763.html 转载请保留说明!

上一篇:neoDVDstd.exe - neoDVDstd是什么进程 有什么用

下一篇:kencapi.exe是什么进程 kencapi进程查询(kscreensaverapp.exe是什么)

  • 放弃在时尚杂志投硬广,轻奢品牌如何做social?(放弃在时尚杂志中的作文)

    放弃在时尚杂志投硬广,轻奢品牌如何做social?(放弃在时尚杂志中的作文)

  • 博客推广方法技巧(博客推广的方法)

    博客推广方法技巧(博客推广的方法)

  • 美团怎么发起二次配送(美团怎么发起二次退款)

    美团怎么发起二次配送(美团怎么发起二次退款)

  • 美团众包怎样设置顺路单(美团众包怎样设置手动接单)

    美团众包怎样设置顺路单(美团众包怎样设置手动接单)

  • 华为锐龙版是什么意思(华为锐龙版能玩游戏吗)

    华为锐龙版是什么意思(华为锐龙版能玩游戏吗)

  • 怎么让青轴声小点(怎么减小青轴的声音)

    怎么让青轴声小点(怎么减小青轴的声音)

  • 四g手机可以升级五g吗(四g手机可以升五g网络吗)

    四g手机可以升级五g吗(四g手机可以升五g网络吗)

  • 蓝牙外围设备没有驱动程序怎么办(蓝牙外围设备没有声音)

    蓝牙外围设备没有驱动程序怎么办(蓝牙外围设备没有声音)

  • 华为mate30发热正常吗(mate30 发热)

    华为mate30发热正常吗(mate30 发热)

  • 华为打开软件后屏幕变暗(华为打开软件后怎么退出)

    华为打开软件后屏幕变暗(华为打开软件后怎么退出)

  • j3455性能相当于i几(j3455处理器性能怎么样)

    j3455性能相当于i几(j3455处理器性能怎么样)

  • 手机灰尘怎么清理(手机灰尘怎么清理听筒)

    手机灰尘怎么清理(手机灰尘怎么清理听筒)

  • 硅油风扇和电子风扇的区别

    硅油风扇和电子风扇的区别

  • 为什么看视频的时候屏幕就暗了(为什么看视频的时候会自动暂停)

    为什么看视频的时候屏幕就暗了(为什么看视频的时候会自动暂停)

  • 字符型常量有哪两种形式(字符型常量符号)

    字符型常量有哪两种形式(字符型常量符号)

  • 微信里的图片怎么放大不了(微信里的图片怎么打印出来)

    微信里的图片怎么放大不了(微信里的图片怎么打印出来)

  • 微信删除后再加对方会有提示么(微信删除后再加回来对方能知道吗)

    微信删除后再加对方会有提示么(微信删除后再加回来对方能知道吗)

  • 手机飞行模式有辐射吗(手机飞行模式有wifi可以用微信吗)

    手机飞行模式有辐射吗(手机飞行模式有wifi可以用微信吗)

  • 华为mate30怎么打开简易模式(华为mate30怎么打开后盖)

    华为mate30怎么打开简易模式(华为mate30怎么打开后盖)

  • 小米9可以反向充电吗(小米9反向充电可以给苹果充电吗)

    小米9可以反向充电吗(小米9反向充电可以给苹果充电吗)

  • oppo手机怎么查找手机(oppo手机怎么查是不是新机正品)

    oppo手机怎么查找手机(oppo手机怎么查是不是新机正品)

  • 淘宝账号怎么解除绑定(淘宝账号怎么解绑)

    淘宝账号怎么解除绑定(淘宝账号怎么解绑)

  • oppo电子保修卡在哪里(oppo电子保修卡在哪里激活)

    oppo电子保修卡在哪里(oppo电子保修卡在哪里激活)

  • 蓝牙耳机怎么分开使用(蓝牙耳机怎么分开连不同的手机)

    蓝牙耳机怎么分开使用(蓝牙耳机怎么分开连不同的手机)

  • 苹果手机能用5g网络吗(苹果手机能用5g流量吗)

    苹果手机能用5g网络吗(苹果手机能用5g流量吗)

  • 如何在家开网店(怎么在家开网店)

    如何在家开网店(怎么在家开网店)

  • Win11怎么快速加密硬盘?Win11加密硬盘方法(win11 zen3)

    Win11怎么快速加密硬盘?Win11加密硬盘方法(win11 zen3)

  • 劳务派遣公司差额征税的账务处理
  • 税前扣除什么意思
  • 研发设备的折旧费计入研发费吗
  • 车险 保险金额
  • 公司出售旧汽车要交什么税
  • 对外投资固定资产的账务处理
  • 小微企业未开票收入大于45万怎么填
  • 增值税纳税申报表附列资料(三)
  • 公司卖车怎么开公司发票
  • 小规模纳税人年应税销售额标准是
  • 电费应收电费和实际电费
  • 溢价发行债券的发行价格怎么计算的
  • 没有税收编码的发票怎么开具红字票
  • 预付款怎么做账务处理
  • 营改增住宿费的进项税可以抵扣吗
  • 生育津贴个税汇算清缴可以扣除吗
  • 没领税票会产生税吗
  • 只有专票没有普票
  • 非金融机构有
  • 汇兑差额会计处理
  • 出口退税增值税发票稽核信息
  • 应税消费品用于连续生产应税消费品的
  • 结转完工产品成本的计算
  • 跨年度的暂估入库账务处理
  • 法人变更股权不转让有什么影响么么
  • Linux怎么使用Windows的软件
  • 发放工资不计提可以吗
  • 公司的劳务费支出怎么做账
  • PHP:pg_unescape_bytea()的用法_PostgreSQL函数
  • 上月发票这月冲红,对这月有影响吗
  • 微信小程序不方便
  • vue控制按钮是否禁用
  • 发票十万元版和百万元版
  • vue动态路由是什么
  • 营改增后残保金计入什么科目
  • 进项税额转出需要补税
  • 生产车间领用材料的会计分录
  • 企业发生销售退回时,不论销售退回的商品
  • 织梦商城
  • 增值税附表3
  • 汇兑损益的种类
  • 高新企业申报条件有哪些
  • d级企业预缴增值税如何申报
  • 逾期交房违约金 已支付金额
  • 一个企业只有收入怎么办
  • 直接减免税款的例子
  • 会计做账做错了
  • 公司往来借款怎么做账
  • 一键ghost U盘版
  • 禁止Windows 打游戏怎么办
  • 系统如何修改
  • win8系统无法开机如何备份数据
  • ubuntudde 中文
  • win8笔记本电脑投屏方法
  • windows7怎么禁用网络
  • 快速批量取关
  • jquery弹出页面
  • nodelink
  • 教你如何使用玻璃胶
  • nodejs查找文件
  • vue css
  • 用户dsn添加
  • js判断字符串字符出现的次数
  • node的使用
  • jquery实现输入框自限制
  • bootstrap steps
  • js面向接口编程
  • jquery事件的响应
  • python 代码缩进
  • 代码实现死锁
  • Python编程中装饰器的使用示例解析
  • 非正常户记录
  • 增值税进项税额抵扣凭证
  • 企业税收筹划中的涉税风险及其防范
  • 内蒙古国税局官网
  • 全国初中应用物理知识竞赛获奖名单
  • 上海市税务局发票怎么开
  • 长沙房产税如何征收
  • 西安市人力资源和社会保障局关于2020年
  • 房屋租赁管理部门制发的《房屋租赁证》
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设