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/api/structures/printer-info
我們這裏只管關心兩個,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')
})