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

news2025/7/11 12:24:34

(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,
                // 如果是开发模式可以使用devTools
                devTools: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.coloradmin.cn/o/1822004.html

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

相关文章

JS实现文字溢出隐藏效果

需求场景 由于项目原因,经常需要使用到canvas来将dom生成为图片供用户保存,但canvas的css属性(例如本文实现的文字溢出隐藏效果)支持并不全面,所有有些功能只能用JS来实现了 实现思路 用JS循环判断填充文本后的元素…

Ollama在windows上的设置

下载 Download Ollama on macOS 安装:是不可以选择安装路径,系统自动运行,不启动模型不占用GPU 参数设置:windows添加环境变量(需要重启ollama) 修改模型位置:添加 OLLAMA_MODELS D:\LLM\Oll…

【C++】模板及模板的特化

目录 一,模板 1,函数模板 什么是函数模板 函数模板原理 函数模板的实例化 推演(隐式)实例化 显示实例化 模板的参数的匹配原则 2,类模板 什么是类模板 类模板的实例化 二,模板的特化 1,类模板的特化 全特化…

基于uni-app与图鸟UI打造的各领域移动端模板大赏

随着移动互联网的迅猛发展,各类移动端应用层出不穷,为了帮助企业快速搭建高效、美观的移动平台,我们基于强大的uni-app与图鸟UI,精心打造了不下于40套覆盖多个领域的移动端模板。今天,就让我们一起领略这些模板的风采吧…

django-vue-admin 本地部署

一、项目地址 主分支:master(稳定版本) 开发分支:develop django-vue3-admin-masterhttps://gitee.com/huge-dream/django-vue3-admin 注意:下载master分支zip代码包,解压后删掉web\src\views\syst…

185.二叉树:二叉搜索树的最近公共祖先(力扣)

代码解决 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode(int x) : val(x), left(NULL), right(NULL) {}* };*/class Solution { public:// 函数用于寻找二叉搜索树中节点 p 和 q 的最低…

小程序外卖开发中的关键技术与实现方法

小程序外卖服务凭借其便捷性和灵活性,正成为现代餐饮行业的重要组成部分。开发一个功能完善的小程序外卖系统,需要掌握一系列关键技术和实现方法。本文将介绍小程序外卖开发中的核心技术,并提供具体的代码示例,帮助开发者理解和实…

慎投!4区SCISSCI有停刊风险!网传的水刊之王解析大全,真的好投吗?

本周投稿推荐 SSCI • 中科院2区,6.0-7.0(录用友好) EI • 各领域沾边均可(2天录用) CNKI • 7天录用-检索(急录友好) SCI&EI • 4区生物医学类,0.5-1.0(录用…

JDBC操作数据库的方法

目录 一、JDBC介绍 二、使用方法(以MySQL为例) (1)MySQL的jar包,导入到IDEA (2)使用代码,操作数据库 1)设置数据源 1.创建MysqlDataSource对象,使用set…

【Unity每日一记】FairyGUI为什么能自动生成代码,它的好处是什么

👨‍💻个人主页:元宇宙-秩沅 👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍💻 本文由 秩沅 原创 👨‍💻 收录于专栏:uni…

GPT办公与科研应用、论文撰写、数据分析、机器学习、深度学习及AI绘图高级应用

原文链接:GPT办公与科研应用、论文撰写、数据分析、机器学习、深度学习及AI绘图高级应用https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247606667&idx3&sn2c5be84dfcd62d748f77b10a731d809d&chksmfa82606ccdf5e97ad1a2a86662c75794033d8e2e…

mmap引起的内存泄漏分析

最近遇到一个内存泄漏问题,由于问题出现在客户端,只能通过客户提供的Log来分析。 根据客户提供的/proc/meminfo数据发现,MemAvailable 由294072kB减小至18128kB,减小约269MB,引起该变化的最直接原因是PageTables由614…

Python云实例初始化和配置的工具库之cloud-init使用详解

概要 在云计算环境中,自动化配置和管理实例是非常重要的任务。cloud-init 是一个用于云实例初始化和配置的工具,广泛应用于各种云服务提供商(如 AWS、Azure、GCP 等)的实例启动过程。通过 cloud-init,用户可以在实例启动时自动执行脚本、安装软件包、配置网络等。本文将详…

20240613解决飞凌的OK3588-C的核心板的适配以太网RTL8211F-CG

20240613解决飞凌的OK3588-C的核心板的适配以太网RTL8211F-CG 2024/6/13 16:58 缘起:对于飞凌的OK3588-C的核心板,参照飞凌的底板/开发板。 ETH0空接,ETH1由RTL8211FSI-CG【20¥】更换为RTL8211F-CG【4¥】。 都是千兆网…

快速掌握 Python requests 库发送 JSON 数据的 POST 请求技巧

在现代 Web 开发中,客户端与服务器之间进行数据交换的需求越来越普遍。而在 Python 这个强大的编程语言中,requests 库是一个广泛使用且功能强大的 HTTP 请求库。特别是在进行 API 调用时,发送 POST 请求并附带 JSON 数据是一个非常常见的需求…

【React】useMemo

什么是 useMemo? useMemo 是 React 中的一个 Hook,它可以用来缓存计算结果,并在后续的渲染中重复利用这些计算结果。useMemo 接收两个参数:一个函数和一个依赖数组。当依赖数组中的任何一个值发生变化时,useMemo 会重新…

内网环境实现maven项目打包部署(包括踩坑!!)

内网环境实现maven项目打包部署&#xff08;包括踩坑&#xff01;&#xff01;&#xff09; 由于内网保密项目原因 拿我本地测试 过程&#xff1a; jdk1.8 java环境 maven setting配置加上 <!-- 仓库地址(本地上传到内网环境仓库) --> <localRepository>D:\ma…

flutter开发实战-创建一个微光加载效果

flutter开发实战-创建一个微光加载效果 当加载数据的时候&#xff0c;loading是必不可少的。从用户体验&#xff08;UX&#xff09;的角度来看&#xff0c;最重要的是向用户展示加载正在进行。向用户传达数据正在加载的一种流行方法是在与正在加载的内容类型近似的形状上显示带…

Python业务规则引擎库之rules使用详解

概要 在软件开发中,业务规则引擎是一种重要的工具,可以帮助开发者将复杂的业务逻辑从代码中解耦出来,并以更直观的方式进行管理和维护。rules 是一个轻量级的 Python 库,专门用于定义和执行业务规则。它提供了一种简洁且强大的方式来管理应用程序中的规则逻辑,使代码更加…

【Redis】安装和命令行客户端

https://www.bilibili.com/video/BV1cr4y1671t https://www.oz6.cn/articles/58 redis 非结构化有&#xff1a; 键值类型(Redis)文档类型(MongoDB)列类型(HBase)Graph:类型(Neo4j) 扩展性&#xff1a;水平即为分布式扩展 redis特征 键值&#xff08;key-value&#xff09;型…