摘要：使用打印的理由很多情況下程序中使用的打印都是用戶無感知的。所以一般打印任務(wù)發(fā)出，回調(diào)函數(shù)即會(huì)調(diào)用并返回參數(shù)。選項(xiàng)回調(diào)函數(shù)的用法基本和相同，但是由于是提供的方法，配置項(xiàng)非常少，而則擴(kuò)展了很多屬性。

很多情況下程序中使用的打印都是用戶無感知的。并且想要靈活的控制打印內(nèi)容，往往需要借助打印機(jī)給我們提供的api再進(jìn)行開發(fā)，這種開發(fā)方式非常繁瑣，并且開發(fā)難度較大。

electron提供的打印api可以非常靈活的控制打印設(shè)置的顯示，并且可以通過html來書寫打印內(nèi)容。

electron提供了兩種方式進(jìn)行打印，一種是直接調(diào)用打印機(jī)打印，一種是打印到pdf。

并且有兩種對(duì)象可以調(diào)用打?。?/p>

第一是通過window的webcontent對(duì)象，使用此種方式需要多帶帶開出一個(gè)打印的窗口，可以將該窗口隱藏，但是通信調(diào)用相對(duì)復(fù)雜。

另一種是使用頁面的webview元素調(diào)用打印，可以將webview隱藏在調(diào)用的頁面中，通信方式比較簡(jiǎn)單。

兩個(gè)對(duì)象調(diào)用打印方法的使用方式都一樣。

官網(wǎng)api如下

contents.print([options], [callback])
選項(xiàng) Object (可選)

silent Boolean (可選) - 不詢問用戶打印信息，默認(rèn)為 false。
printBackground Boolean (optional) - Also prints the background color and image of the web page. Default is false.
deviceName String (optional) - Set the printer device name to use. Default is "".
callback Function (可選)

success Boolean - Indicates success of the print call.

打印配置(options)中只有簡(jiǎn)單的三個(gè)配置：

silent：打印時(shí)是否不展示打印配置（是否靜默打?。?/p>

printBackground：是否打印背景

deviceName：打印機(jī)設(shè)備名稱

首先要將我們使用的打印機(jī)名稱配置好，并且要在調(diào)用打印前首先要判斷打印機(jī)是否可用。

使用getPrinters方法可獲取當(dāng)前設(shè)備已經(jīng)配置的打印機(jī)列表，注意配置過不是可用，只是在此設(shè)備上安裝過驅(qū)動(dòng)。

通過getprinter獲取到的打印機(jī)對(duì)象：https://electronjs.org/docs/a...

我們這里只管關(guān)心兩個(gè)，name和status，status為0時(shí)表示打印機(jī)可用。

這里的status必須經(jīng)歷一次打印失敗才能返回非0值，也就是說第一次獲取打印機(jī)狀態(tài)一定是0。但是這一次的打印雖然不能判斷出錯(cuò)誤，打印的任務(wù)已經(jīng)預(yù)存在隊(duì)列中了，當(dāng)下一次打印機(jī)狀態(tài)變?yōu)榭捎脮r(shí)，將會(huì)打印暫存的任務(wù)。

當(dāng)打印機(jī)紙張用完時(shí)也是這種情況，剩余任務(wù)會(huì)暫存起來，下次打印機(jī)可用時(shí)即可以打印了。

print的第二個(gè)參數(shù)callback是用于判斷打印任務(wù)是否發(fā)出的回調(diào)，而不是打印任務(wù)完成后的回調(diào)。所以一般打印任務(wù)發(fā)出，回調(diào)函數(shù)即會(huì)調(diào)用并返回參數(shù)true。這個(gè)回調(diào)并不能判斷打印是否真的成功了。

contents.printToPDF(options, callback)
選項(xiàng) Object

marginsType Integer (optional) - Specifies the type of margins to use. Uses 0 for default margin, 1 for no margin, and 2 for minimum margin.
pageSize String (optional) - Specify page size of the generated PDF. Can be A3, A4, A5, Legal, Letter, Tabloid or an Object containing height and width in microns.
printBackground Boolean (optional) - Whether to print CSS backgrounds.
printSelectionOnly Boolean (optional) - Whether to print selection only.
landscape Boolean (optional) - true for landscape, false for portrait.
callback Function - 回調(diào)函數(shù)

error Error
data Buffer

printToPdf的用法基本和print相同，但是由于print是native code提供的方法，配置項(xiàng)非常少，而printToPdf則擴(kuò)展了很多屬性。

包括可以對(duì)打印的margin，打印頁眉頁腳等進(jìn)行配置。

配置項(xiàng)很多，翻了一下源碼發(fā)現(xiàn)還有很多沒有被貼進(jìn)api的：

const defaultPrintingSetting = {
  pageRage: [],
  mediaSize: {},
  landscape: false,
  color: 2,
  headerFooterEnabled: false,
  marginsType: 0,
  isFirstRequest: false,
  requestID: getNextId(),
  previewModifiable: true,
  printToPDF: true,
  printWithCloudPrint: false,
  printWithPrivet: false,
  printWithExtension: false,
  deviceName: "Save as PDF",
  generateDraftData: true,
  fitToPageEnabled: false,
  scaleFactor: 1,
  dpiHorizontal: 72,
  dpiVertical: 72,
  rasterizePDF: false,
  duplex: 0,
  copies: 1,
  collate: true,
  shouldPrintBackgrounds: false,
  shouldPrintSelectionOnly: false
}

打印的時(shí)候打印機(jī)會(huì)給紙張留一個(gè)默認(rèn)邊距，如果是A4這樣的紙張幾乎可以忽略不計(jì)了，但是打印小規(guī)格紙張如50mm*50mm，這個(gè)邊距就十分明顯了，嚴(yán)重影響了整體布局。

printToPdf方法提供了非常多的配置項(xiàng)，其中包括了配置打印邊距的參數(shù)，但是print方法卻沒有該配置項(xiàng)。

我們可以通過一項(xiàng)css配置來解決這個(gè)問題,即@page:

    @page {
      margin: 0px;
    }

通過此配置可靈活配置打印邊距。

還有一個(gè)css屬性@media print {}此配置是只有在打印時(shí)才生效的css，控制的是打印邊距以內(nèi)的css，并不能控制打印邊距。

使用webcontent打印，首先要有一個(gè)打印窗口，這個(gè)窗口不能隨時(shí)打印隨時(shí)創(chuàng)建，比較耗費(fèi)性能?？梢詫⑺诔绦蜻\(yùn)行時(shí)啟動(dòng)好，并做好事件監(jiān)聽。

此過程需和調(diào)用打印的進(jìn)行做好通信：大致過程如下：

可見通信非常繁瑣

使用webview進(jìn)行打印可實(shí)現(xiàn)同樣的效果但是通信方式會(huì)變得簡(jiǎn)單，因?yàn)殇秩具M(jìn)程和webview通信不需要經(jīng)過主進(jìn)程，通過如下方式即可：

// In embedder page.
  const webview = document.querySelector("webview")
  webview.addEventListener("ipc-message", (event) => {
    console.log(event.channel)
    // Prints "pong"
  })
  webview.send("ping")
Copy

// 在訪客頁。
  const {ipcRenderer} = require("electron")
  ipcRenderer.on("ping", () => {
    ipcRenderer.sendToHost("pong")
  })

示例demo：https://github.com/ConardLi/e...