不少状况下程序中使用的打印都是用户无感知的。而且想要灵活的控制打印内容,每每须要借助打印机给咱们提供的api再进行开发,这种开发方式很是繁琐,而且开发难度较大。css
electron提供的打印api能够很是灵活的控制打印设置的显示,而且能够经过html来书写打印内容。html
electron提供了两种方式进行打印,一种是直接调用打印机打印,一种是打印到pdf。git
而且有两种对象能够调用打印:github
第一是经过window的webcontent对象,使用此种方式须要单独开出一个打印的窗口,能够将该窗口隐藏,可是通讯调用相对复杂。web
另外一种是使用页面的webview元素调用打印,能够将webview隐藏在调用的页面中,通讯方式比较简单。segmentfault
两个对象调用打印方法的使用方式都同样。api
官网api以下electron
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。这个回调并不能判断打印是否真的成功了。
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 }
打印的时候打印机会给纸张留一个默认边距,若是是A4这样的纸张几乎能够忽略不计了,可是打印小规格纸张如50mm*50mm,这个边距就十分明显了,严重影响了总体布局。
printToPdf方法提供了很是多的配置项,其中包括了配置打印边距的参数,可是print方法却没有该配置项。
咱们能够经过一项css配置来解决这个问题,即@page
:
@page { margin: 0px; }
经过此配置可灵活配置打印边距。
还有一个css属性@media print {}
此配置是只有在打印时才生效的css,控制的是打印边距之内的css,并不能控制打印边距。
使用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') })
示例demo:https://github.com/ConardLi/e...
来源:https://segmentfault.com/a/1190000016675661