使用electron靜默打印

1.使用electron打印的理由

不少狀況下程序中使用的打印都是用戶無感知的。而且想要靈活的控制打印內容，每每須要藉助打印機給咱們提供的api再進行開發，這種開發方式很是繁瑣，而且開發難度較大。

electron提供的打印api能夠很是靈活的控制打印設置的顯示，而且能夠經過html來書寫打印內容。

2.api

electron提供了兩種方式進行打印，一種是直接調用打印機打印，一種是打印到pdf。

而且有兩種對象能夠調用打印：

第一是經過window的webcontent對象，使用此種方式須要單獨開出一個打印的窗口，能夠將該窗口隱藏，可是通訊調用相對複雜。

另外一種是使用頁面的webview元素調用打印，能夠將webview隱藏在調用的頁面中，通訊方式比較簡單。

兩個對象調用打印方法的使用方式都同樣。

2.1 print

官網api以下

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

silent Boolean (可選) - 不詢問用戶打印信息，默認爲 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)中只有簡單的三個配置：

silent：打印時是否不展現打印配置（是否靜默打印）

printBackground：是否打印背景

deviceName：打印機設備名稱

首先要將咱們使用的打印機名稱配置好，而且要在調用打印前首先要判斷打印機是否可用。

使用getPrinters方法可獲取當前設備已經配置的打印機列表，注意配置過不是可用，只是在此設備上安裝過驅動。

經過getprinter獲取到的打印機對象：https://electronjs.org/docs/a...

咱們這裏只管關心兩個，name和status，status爲0時表示打印機可用。

這裏的status必須經歷一次打印失敗才能返回非0值，也就是說第一次獲取打印機狀態必定是0。可是這一次的打印雖然不能判斷出錯誤，打印的任務已經預存在隊列中了，當下一次打印機狀態變爲可用時，將會打印暫存的任務。

當打印機紙張用完時也是這種狀況，剩餘任務會暫存起來，下次打印機可用時便可以打印了。

print的第二個參數callback是用於判斷打印任務是否發出的回調，而不是打印任務完成後的回調。因此通常打印任務發出，回調函數即會調用並返回參數true。這個回調並不能判斷打印是否真的成功了。

2.2 printToPdf

contents.printToPDF(options, callback)
選項 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 - 回調函數

error Error
data Buffer

printToPdf的用法基本和print相同，可是因爲print是native code提供的方法，配置項很是少，而printToPdf則擴展了不少屬性。

包括能夠對打印的margin，打印頁眉頁腳等進行配置。

配置項不少，翻了一下源碼發現還有不少沒有被貼進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
}

3.打印邊距問題

打印的時候打印機會給紙張留一個默認邊距，若是是A4這樣的紙張幾乎能夠忽略不計了，可是打印小規格紙張如50mm*50mm，這個邊距就十分明顯了，嚴重影響了總體佈局。

printToPdf方法提供了很是多的配置項，其中包括了配置打印邊距的參數，可是print方法卻沒有該配置項。

咱們能夠經過一項css配置來解決這個問題,即@page:

@page {
      margin: 0px;
    }

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

還有一個css屬性@media print {}此配置是隻有在打印時才生效的css，控制的是打印邊距之內的css，並不能控制打印邊距。

4.打印方案

使用webcontent打印，首先要有一個打印窗口，這個窗口不能隨時打印隨時建立，比較耗費性能。能夠將它在程序運行時啓動好，並作好事件監聽。

此過程需和調用打印的進行作好通訊：大體過程以下：

可見通訊很是繁瑣

使用webview進行打印可實現一樣的效果可是通訊方式會變得簡單，由於渲染進程和webview通訊不須要通過主進程，經過以下方式便可：

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

5.示例程序

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