位置: 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是什么)

  • 国家企业信用信息公示系统查询企业已公示成功?

    国家企业信用信息公示系统查询企业已公示成功?

  • 微信视频号怎么保存视频(微信视频号怎么带货)

    微信视频号怎么保存视频(微信视频号怎么带货)

  • word绘图工具栏在哪里(word绘图工具栏怎么调出来)

    word绘图工具栏在哪里(word绘图工具栏怎么调出来)

  • 怎么设置微信主页背景(怎么设置微信主页背景图片)

    怎么设置微信主页背景(怎么设置微信主页背景图片)

  • 在文字下面怎么加横线(在文字下面怎么加下划线)

    在文字下面怎么加横线(在文字下面怎么加下划线)

  • qq步数怎么开(qq里面步数怎么开启)

    qq步数怎么开(qq里面步数怎么开启)

  • 2015年苹果发布了什么手机

    2015年苹果发布了什么手机

  • wan/lan是什么接口(wan lan哪个接)

    wan/lan是什么接口(wan lan哪个接)

  • ca用户是什么意思(ca登录和用户登录区别)

    ca用户是什么意思(ca登录和用户登录区别)

  • 华为屏下指纹有那几款(华为屏幕下方出现指纹)

    华为屏下指纹有那几款(华为屏幕下方出现指纹)

  • 快手作品推广有用吗(快手作品推广有上限吗)

    快手作品推广有用吗(快手作品推广有上限吗)

  • 手机qq怎么发聊天记录给别人(手机QQ怎么发聊天记录)

    手机qq怎么发聊天记录给别人(手机QQ怎么发聊天记录)

  • airport怎么改名(怎么改名airpods)

    airport怎么改名(怎么改名airpods)

  • 微信怎么设置自动启动(微信怎么设置自动收红包和转账)

    微信怎么设置自动启动(微信怎么设置自动收红包和转账)

  • airpods购买日期未验证什么意思(airpods购买日期未验证怎么解决)

    airpods购买日期未验证什么意思(airpods购买日期未验证怎么解决)

  • iphone8需要贴膜么(iphone8用贴膜吗)

    iphone8需要贴膜么(iphone8用贴膜吗)

  • beats无线耳机怎么开(beats无线耳机怎么恢复出厂设置)

    beats无线耳机怎么开(beats无线耳机怎么恢复出厂设置)

  • 快手超级管理怎么踢人(快手超级管理怎么禁言)

    快手超级管理怎么踢人(快手超级管理怎么禁言)

  • vivox9s如何找回刪除的照片(vivox9s丢了怎么找回)

    vivox9s如何找回刪除的照片(vivox9s丢了怎么找回)

  • airpods可以录歌吗(airpods可以录音唱歌吗)

    airpods可以录歌吗(airpods可以录音唱歌吗)

  • 小米应用商店无法联网(小米应用商店无法升级软件)

    小米应用商店无法联网(小米应用商店无法升级软件)

  • Mozilla.exe是什么进程 有什么作用 Mozilla进程查询(mozilla是什么文件)

    Mozilla.exe是什么进程 有什么作用 Mozilla进程查询(mozilla是什么文件)

  • google浏览器应用程序无法启动,因为应用程序的并行配置不正确的完美解决方案(chrome谷歌浏览器)

    google浏览器应用程序无法启动,因为应用程序的并行配置不正确的完美解决方案(chrome谷歌浏览器)

  • xauth命令  管理X服务器的访问授权(命令行怎么管理员运行)

    xauth命令 管理X服务器的访问授权(命令行怎么管理员运行)

  • 按差额缴纳增值税
  • 增值税发票的红章压到金额没有关系吧
  • 公司汽车的折旧费可以扺税吗
  • 进项税额销项税额月末需要结转吗
  • 个税身份验证不通过
  • 未分配利润期末减期初等于什么
  • 如何进行银行存款的实质性程序
  • 赠与合同收税吗
  • 专票丢失登报后怎么处理
  • 收到捐赠设备
  • 劳务发票税率营改增后是多少?
  • 交易性金融资产的交易费用计入哪里
  • 财政补贴收入是什么
  • 开给个人的通讯费发票能下账吗
  • 可转换公司债券转股会计分录
  • 防暑降温列支什么费用
  • 买方投资公司
  • 个体工商户要交附加税吗
  • 资产负债表没有实收资本正常吗
  • 电脑任务栏在右边怎么调回下边
  • 抵扣农产品进项税时,也要抵扣运费吗
  • pavfires.exe - pavfires是什么进程 有什么用
  • 商业汇票计入什么科目技能高考
  • 京东到家的物流模式
  • vue权限控制设计
  • ChatGPT在热门行业的应用场景有哪些
  • yum命令详解
  • php对接微信支付教程
  • 滴滴打车老板起源故事
  • 工程前期费用是什么意思
  • js继承方式及其优缺点
  • 农产品免税发票可以抵扣增值税吗
  • 纳税人填报的纳税申报表
  • 企业所得税第二十七条规定
  • 出口商品没有发票可以入收入吗
  • 座谈会费用报销明细怎么填写
  • 如何关闭mysqld
  • 增值税开票系统客服电话
  • 理财产品怎么分类总结
  • 数据库varchar和nvarchar
  • mysql怎样
  • 高新企业研发收入占总收入比例怎么算
  • 成本少了怎么处理
  • 退货只能退一半价钱合理吗
  • 汇票和本票的区别是
  • 先付款后开发票的会计分录?
  • 小规模纳税人没有进项发票违法吗
  • 厂家返利怎么入账
  • 增值税普通发票可以抵扣多少钱
  • 什么时候用以前年度损益调整科目什么时候用所得税科目
  • 应收账款周转率计算公式
  • 备查账簿有没有固定的格式
  • 怎么去掉0前面的逗号
  • sql server2000个人版安装步骤
  • sql事务处理
  • 新百伦588
  • windows server 2003如何安装
  • win8系统没有声音
  • linux系统中的脚本文件一般以什么开头
  • windows xp.
  • win10声音突然变得很沉闷
  • wcesmgr.exe - wcesmgr 是什么进程
  • aix操作命令
  • 用win7的人多吗
  • linux-c
  • windows8.1安装windows7
  • 微软开始推送win10
  • win8补丁官网
  • [置顶] [寒江孤叶丶的Cocos2d-x之旅_27]CocoStudio导出的LUA文件怎么使用?
  • 安卓开源部分叫什么
  • shell脚本命令行参数
  • android 设置背景
  • python中lambda怎么用
  • 地税客服电话
  • 国税局黑龙江省
  • 发票明细导入excel
  • 什么是税务证书密码
  • 纳税服务投诉整改报告
  • 上海买房退税政策2023最新
  • 文件印发的格式怎么设置
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设