// printHandle.ts
let win: BrowserWindow;
export function usePrintHandle() {
  // 獲取系統(tǒng)打印機(jī)詳情
  ipcMain.handle("getPrinters", async (event) => {
    return await event.sender.getPrintersAsync();
  });
  // 調(diào)用打印機(jī)打印
  ipcMain.handle(
    "printHandlePrint",
    async (event, options: WebContentsPrintOptions) => {
      return new Promise((resolve) => {
        event.sender.print(
          options,
          (success: boolean, failureReason: string) => {
            resolve({ success, failureReason });
          }
        );
      });
    }
  );
  // 創(chuàng)建打印界面
  ipcMain.handle("openPrintWindow", (_, id) => {
    // id 用于傳遞的參數(shù)
    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 開發(fā)環(huán)境路徑
 * @param {string} proPath 生產(chǎn)環(huán)境路徑
 * @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,
    // 如果是開發(fā)模式可以使用devTools
    devTools: process.env.NODE_ENV === "development",
    // 在macos中啟用橡皮動(dòng)畫
    scrollBounce: process.platform === "darwin",
  },
};
export function openPrintWindow(id) {
  if (win) {
    win.hide(); /*測(cè)試*/
    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"); // 瀏覽器環(huán)境報(bào)錯(cuò)
  const onPrint = async () => {
    await ipcRenderer.invoke("openPrintWindow", 123123); // 創(chuàng)建新窗口并傳遞數(shù)據(jù)
  };
</script>

<template>
    <div>我要被打印了</div>
</template>
<script lang="ts" setup>
  import { useRoute } from "vue-router";
  import { ref, onMounted  } from "vue";
  
  const { ipcRenderer } = require("electron"); // 瀏覽器環(huán)境報(bào)錯(cuò)
  
  const route = useRoute();
  const id = route.query.id as string; // 接收參數(shù)
?
  onMounted(async () => {
    const windowTitle = window.document.querySelector(".window-title ");
    windowTitle && windowTitle.remove(); // 刪除頂部標(biāo)題關(guān)閉按鈕
    // await getDataApi(id); // 獲取數(shù)據(jù)
    try {
      await ipcRenderer.invoke("printHandlePrint", {
        silent: true, // 靜默打印
        margins: { marginType: "none" }, // 網(wǎng)頁(yè)的邊距
      }); 
    } catch (error) {
    } finally {
      await ipcRenderer.invoke("destroyPrintWindow"); // 打印完成銷毀新窗口
    }
  });
</script>