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)
    })