使用electron静默打印

Michael_Lin 发布于2019-08-23 12:20 / 1149人阅读

摘要：使用打印的理由很多情况下程序中使用的打印都是用户无感知的。所以一般打印任务发出，回调函数即会调用并返回参数。选项回调函数的用法基本和相同，但是由于是提供的方法，配置项非常少，而则扩展了很多属性。

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

云服务器超融合服务器 electron使用webrtc electron 静默错误静默更新

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98342.html

electron-vue静默打印2019最新解决方案（含源码）

摘要：项目环境代码完成时间废话不多说，先放源码安装依赖运行项目打包项目目录结构先在主进程引入在方法里添加以下代码，获取打印机列表在主线程下，通过对象监听渲染线程传过来的事件在主线程中获取打印机列表通过发送事件到渲染线程，同时将项目环境 node 10.15.3yarn 1.15.2win10代码完成时间2019-4-18 废话不多说，先放源码 GitHub https://github....

xzavier 2019-08-23 17:01 评论0 收藏0
Electron选择文件、文件夹对话框(非原创，传播)

摘要：文章转载自，感谢文章作者，成功完成选择文件夹的功能第一种方法，纯代码其原理是利用标签的类别，打开选择文件对话框通过标签的事件，将选择的文件返回。通过标签对象的属性获得选中的文件名。文章转载自：https://www.jianshu.com/p/e71...，感谢文章作者，成功完成选择文件夹的功能 1.第一种方法，纯js代码其原理是：利用input标签的file类别，打开选择文件对话...

Clect 2019-08-23 18:18 评论0 收藏0
使用 Electron 打印到 PDF

摘要：使用打印到此系列文章的应用示例已发布于可以或下载后运行查看欢迎中的模块具有属性它允许您的应用程序进行打印以及打印到这个模块有一个版本可用于这两个进程和在浏览器中查看完整文档打印到支持为了演示打印到功能上面的示例按钮会将此页面保存为如果使用 Electron 打印到 PDF 此系列文章的应用示例已发布于 GitHub: electron-api-demos-Zh_CN. 可以 Clon...

DTeam 2019-08-21 16:58 评论0 收藏0
使用 Electron 打印到 PDF

摘要：使用打印到此系列文章的应用示例已发布于可以或下载后运行查看欢迎中的模块具有属性它允许您的应用程序进行打印以及打印到这个模块有一个版本可用于这两个进程和在浏览器中查看完整文档打印到支持为了演示打印到功能上面的示例按钮会将此页面保存为如果使用 Electron 打印到 PDF 此系列文章的应用示例已发布于 GitHub: electron-api-demos-Zh_CN. 可以 Clon...

Gilbertat 2019-08-05 12:12 评论0 收藏0
VSCODE下调试 Electron 项目

摘要：最近使用开发了一套软件，记录一下遇到的调试问题所需工具官网链接本次所使用的版本为本次直接使用的链接官网链接配置方式我们使用的项目初始配置已经完成。建议端代码在主进程中运行调试确定无误后再引入渲染进程中减少调试工作难度。最近使用electron开发了一套软件，记录一下遇到的调试问题所需工具 vscode 官网链接; electron,本次所使用的版本为: Electron: 1...

LittleLiByte 2019-08-21 17:39 评论0 收藏0