欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

electron實(shí)現(xiàn)打印功能支持靜默打印、無感打印

 更新時(shí)間:2023年12月20日 08:58:07   作者:Congwei12138  
使用electron開發(fā)應(yīng)用遇到了打印小票的功能,實(shí)現(xiàn)途中還是幾經(jīng)波折,下面這篇文章主要給大家介紹了關(guān)于electron實(shí)現(xiàn)打印功能支持靜默打印、無感打印的相關(guān)資料,需要的朋友可以參考下

實(shí)現(xiàn)思路

業(yè)務(wù)上目前有兩種打印的方法:

  • webview標(biāo)簽:electron提供webview用于在一個(gè)獨(dú)立的 frame 和進(jìn)程里顯示外部 web 內(nèi)容。但是在Electron >= 5中是禁用該標(biāo)簽的,所以就直接放棄它。
  • webContent.print方法:webCompent是主進(jìn)程用來渲染和控制網(wǎng)頁的對象,而它的print方法是用來打印渲染進(jìn)程中的網(wǎng)頁內(nèi)容。這里我們選擇這個(gè)方法。

總體思路大概為:

  • 在頁面點(diǎn)擊打印按鈕,發(fā)布訂閱去創(chuàng)建一個(gè)隱藏的新窗口,窗口內(nèi)容就是我們要打印的內(nèi)容。利用新窗口展示的路徑的hash和打印頁面路由相互匹配實(shí)現(xiàn)指定打印內(nèi)容。
  • 在打印頁面初始化后,需要窗口去掉標(biāo)題的按鈕,防止亂入到打印頁面。然后在根據(jù)路由傳遞的參數(shù)查找數(shù)據(jù)渲染頁面。 再然后發(fā)布printHandlePrint事件進(jìn)行打印并設(shè)置靜默打印和去除邊距。最后打印完成發(fā)布destroyPrintWindow事件銷毀新窗口。

實(shí)現(xiàn)

1、創(chuàng)建打印方法

使用ipcMain.handle向主進(jìn)程訂閱打印相關(guān)事件。其中printHandlePrint訂閱就是調(diào)用打印機(jī)的方法。最重要的是openPrintWindow訂閱,它的內(nèi)部去調(diào)用了openPrintWindow方法,它的用處就是用于創(chuàng)建一個(gè)新的BrowserWindow窗口,將要打印的內(nèi)容放進(jìn)新窗口中,這樣我們就可以實(shí)現(xiàn)打印指定內(nèi)容的功能。destroyPrintWindow訂閱作用于銷毀創(chuàng)建的新窗口。

可以看到openPrintWindow會接受兩個(gè)參數(shù),第一個(gè)參數(shù)是事件對象,第二個(gè)參數(shù)是發(fā)布事件時(shí)傳遞的參數(shù),而這個(gè)參數(shù)最終會通過路由的方式傳遞到打印的新窗口中。實(shí)現(xiàn)渲染進(jìn)程和渲染進(jìn)程的偽通信。

方法寫好之后記得要在app.whenReady()后調(diào)用這個(gè)方法。

// 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();
})

2、創(chuàng)建新的BrowserWindow窗口

首先這個(gè)創(chuàng)建新窗口的函數(shù)會在openPrintWindow訂閱中觸發(fā),也就是在點(diǎn)擊了打印按鈕時(shí)觸發(fā)。所以會判斷時(shí)候存在這個(gè)新窗口,如果存在就要隱藏并銷毀掉,這樣可以保證我們每次點(diǎn)擊打印按鈕時(shí)都會是最新的隱藏的窗口。

然后需要在ready-to-show事件中將新窗口隱藏掉,這樣做的好處是這個(gè)新窗口一直都是隱藏的,從而實(shí)現(xiàn)無感打印。

最后有一個(gè)問題就是如何將打印的數(shù)據(jù)添加到新的窗口中,可以通過新窗口實(shí)例對象的loadURL方法,這個(gè)方法傳遞一個(gè)我們要展示內(nèi)容的路徑。printURLCustom方法中可以看到路徑就是項(xiàng)目打包根頁面,而后面的hash就是我們路由的hash模式路由。 所以我們可以寫一個(gè)print組件,然后為這個(gè)組件增加print路由。這樣我們打開的新窗口顯示就是print組件的內(nèi)容。

openPrintWindow訂閱的參數(shù)會作為路由的query參數(shù)拼接到路徑上面,print組件就可以拿到點(diǎn)擊組件打印傳遞的參數(shù)。

// 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中啟用橡皮動畫
    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、創(chuàng)建點(diǎn)擊打印組件

這里是通過ipcRenderer渲染進(jìn)程攜帶參數(shù)發(fā)布openPrintWindow事件。這里需要注意的是ipcRenderer要使用commonjs引入,否則會報(bào)錯(cuò)TypeError: path.join is not a function. 但是瀏覽器不支持commonjs,所以非常不建議在瀏覽器上跑這個(gè)項(xiàng)目。

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

4、創(chuàng)建打印組件

在打印新窗口時(shí)雖然設(shè)置了frame:false,但是標(biāo)題的關(guān)閉、最小化這些按鈕還存在,導(dǎo)致打印也會把按鈕打印到頁面。我沒有找到完美的解決辦法,所以直接刪除了DOM。

參數(shù)可以通過route.query拿到點(diǎn)擊打印按鈕傳遞的參數(shù)。

通過ipcRenderer渲染進(jìn)程發(fā)布printHandlePrint事件,傳遞參數(shù)為的打印機(jī)配置。其中啟用了靜默打印和去除打印頁面邊距。

靜默打印是指用默認(rèn)的打印機(jī)打印出所有頁并且不希望彈出對話框進(jìn)行設(shè)置,所以在打印的時(shí)候要設(shè)置好系統(tǒng)默認(rèn)打印機(jī)。

最后在打印完成時(shí)發(fā)布destroyPrintWindow事件,銷毀掉打印新窗口。

<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)頁的邊距
      }); 
    } catch (error) {
    } finally {
      await ipcRenderer.invoke("destroyPrintWindow"); // 打印完成銷毀新窗口
    }
  });
</script>

總結(jié) 

到此這篇關(guān)于electron實(shí)現(xiàn)打印功能支持靜默打印、無感打印的文章就介紹到這了,更多相關(guān)electron打印功能內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Vue3中Hooks函數(shù)的使用及封裝思想詳解

    Vue3中Hooks函數(shù)的使用及封裝思想詳解

    Vue?3中的Hooks函數(shù)是一種用于在組件中共享可復(fù)用邏輯的方式,簡單來說,就是將單獨(dú)功能的js代碼抽離出來,?加工成公共函數(shù),從而達(dá)到邏輯復(fù)用,下面小編就來和大家聊聊Hooks函數(shù)的使用及封裝思想吧
    2023-06-06
  • vue使用技巧及vue項(xiàng)目中遇到的問題

    vue使用技巧及vue項(xiàng)目中遇到的問題

    這篇文章主要介紹了vue使用技巧及vue項(xiàng)目中遇到的問題,本文給大家?guī)淼闹皇且徊糠?,后續(xù)還會持續(xù)更新,感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧
    2018-06-06
  • vue圖片上傳組件使用詳解

    vue圖片上傳組件使用詳解

    這篇文章主要為大家詳細(xì)介紹了vue圖片上傳組件的使用方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2019-12-12
  • vue-cli3配置favicon.ico和title的流程

    vue-cli3配置favicon.ico和title的流程

    這篇文章主要介紹了vue-cli3配置favicon.ico和title的流程,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-10-10
  • Vue前端利用slice()方法實(shí)現(xiàn)分頁器

    Vue前端利用slice()方法實(shí)現(xiàn)分頁器

    分頁功能是常見的需求之一,本文主要介紹了Vue前端利用slice()方法實(shí)現(xiàn)分頁器,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-07-07
  • vue 實(shí)現(xiàn)websocket發(fā)送消息并實(shí)時(shí)接收消息

    vue 實(shí)現(xiàn)websocket發(fā)送消息并實(shí)時(shí)接收消息

    這篇文章主要介紹了vue 實(shí)現(xiàn)websocket發(fā)送消息并實(shí)時(shí)接收消息,項(xiàng)目結(jié)合vue腳手架和websocket來搭建,本文給大家分享實(shí)例代碼,需要的朋友可以參考下
    2019-12-12
  • 基于VUE移動音樂WEBAPP跨域請求失敗的解決方法

    基于VUE移動音樂WEBAPP跨域請求失敗的解決方法

    這篇文章主要介紹了基于VUE移動音樂WEBAPP跨域請求失敗的解決方法,需要的朋友可以參考下
    2018-01-01
  • vue移動端實(shí)現(xiàn)下拉刷新

    vue移動端實(shí)現(xiàn)下拉刷新

    我們通過原理講解以及代碼實(shí)例給大家分享了關(guān)于VUE實(shí)現(xiàn)移動下拉刷新的功能,有的朋友可以跟著學(xué)習(xí)下。
    2018-04-04
  • 使用yarn?build?打包vue項(xiàng)目時(shí)靜態(tài)文件或圖片未打包成功的問題及解決方法

    使用yarn?build?打包vue項(xiàng)目時(shí)靜態(tài)文件或圖片未打包成功的問題及解決方法

    這篇文章主要介紹了使用yarn?build?打包vue項(xiàng)目時(shí)靜態(tài)文件或圖片未打包成功的問題及解決方法,解決方法不復(fù)雜通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2023-08-08
  • 如何使用el-cascader組件寫下拉級聯(lián)多選及全選功能

    如何使用el-cascader組件寫下拉級聯(lián)多選及全選功能

    這篇文章主要介紹了如何使用el-cascader組件寫下拉級聯(lián)多選及全選功能,因?yàn)槭怯腥x的功能,所以不能直接使用el-cascader組件,?而是選擇使用el-select組件,?在此組件內(nèi)部使用el-cascader-panel級聯(lián)面板,感興趣的朋友跟隨小編一起看看吧
    2024-03-03

最新評論