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

// printHandle.ts
let 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.ts
app.whenReady().then(()=>{
  usePrintHandle();
})

// 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.ts
let 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;
  });
}
​

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

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