Electron 打印功能的实现_electron 外接打印机打印条形码

Print示例

// webContent
let electron = require('electron')
let webContent = electron.remote.getCurrentWebContents()
webContent.print({printBackground: true}, (success, errorType) => {
  if (!success) console.log(errorType)
// webview
let webviewObj = document.querySelector('webview')
webviewObj.print({printBackground: true})
// iframe
let iframeObj = document.createElement('iframe')
iframeObj.width = '400'
iframeObj.height = '300'
document.body.appendChild(iframeObj)
iframeObj.src = URL.createObjectURL(new Blob([`
<!DOCTYPE html>
<html lang="zh">
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Print</title>
  </head>
    <div>自定义打印内容</div>
  </body>
</html>
`], { type: 'text/html' }))
iframeObj.contentWindow && iframeObj.contentWindow.print()

PrintToPDF示例

// webContent
let electron = require('electron')
let fs = require('fs')
let path = require('path')
let webContent = electron.remote.getCurrentWebContents()
let pdfPath = path.join(electron.remote.app.getPath('desktop'), '1.pdf')
webContent.printToPDF({printBackground: true, landscape:true}).then(data => {
  fs.writeFile(pdfPath, data, (error) => {
    if (error) throw error
    console.log(`Wrote PDF successfully to ${pdfPath}`)
}).catch(error => {
  console.log(`Failed to write PDF to ${pdfPath}: `, error)
// webview
let webviewObj = document.querySelector('webview')
webviewObj.printToPDF({printBackground: true}).then(data => {
  fs.writeFile(pdfPath, data, (error) => {
    if (error) throw error
    console.log(`Wrote PDF successfully to ${pdfPath}`)
}).catch(error => {
  console.log(`Failed to write PDF to ${pdfPath}: `, error)
                    Electron中的打印功能有以下几种方式：webContents的print和printToPDF方法、webview标签的print和printToPDF方法、iframe的print方法。关于print方法，webContents、webview和iframe都是调用的浏览器自带的打印功能，虽然Electron文档中罗列了很多打印配置项，但实际使用时看不到实际效果，打印的最终效果也较差。而printToPDF方法效果就好很多。
第一种：通过window的webcontent对象，使用此种方式需要单独开出一个打印的窗口，可以将该窗口隐藏，但是通信调用相对复杂。
第二种：使用页面的webview元素调用打印，可以将webview隐藏在调用的页面中，通信方式比较简单。
两个对象调用打印方法的使用方式都一样。
本文是通过第二种方法实现静默打印。
三、实现过程：
1、要实现打印功能，首先要知道我们的设备上有哪些打印机。方法是：在渲染线程通过electron的ipcRenderer对象发送事件到主线
electron+vuecli3 实现设置打印机，静默打印小票功能
git clone https://github.com/sunniejs/electron-vue-print-demo.git
npm install
npm  run electron:serve
1.用户点击打印
2.查询本地 electron-store(用来向本地存储，读取数据)是否存打印机名称
3.已经设置，直接打印
4.没有设置，弹出设置打印机框
5.用户设置好确认后打印
有什么问题可以提 issue 或扫描微信二维码跟我联系，项目持续优化，加群获取最新更新消息
您可以扫描添加下方的微信并备注 Sol 加交流群，给我提意见，交流学习。
如果对你有帮助送我一颗小星星（づ￣3￣）づ╭:red_heart:～
				电子打印服务器
一个简单的HTTP打印服务器。 通过HTTP（或HTTPS）接受命令，并打印从提供的URL加载的文档。
 主要目的是允许从本地网络中的任何设备进行更快的打印（例如，与Google Cloud Print相比）和简单的打印
服务器API
 GET /printers获取可用打印机的列表。 返回对象的JSON数组
POST /print print-打印指定的URL。 请求正文应采用以下格式： 
  " jobs " : [{
    " url " : " http://example.test/some/document.html " ,
    " printer " : " Some PDF Printer " ,
    " settings " : {
      " duplex " : " short " /* " long " | " simplex " 
git clone https://github.com/sunnie1992/electron-vue-print-demo.git
npm install
npm run electron:serve
1.用户点击打印
2.查询本地electron-store(用来向本地存储，读取数据)是否存打印机名称
				Node.js PDF打印
 用于从Node.js和Electron打印PDF文件的实用程序。
 :white_heavy_check_mark: 在Windows和类似Unix的操作系统上工作。
 :white_heavy_check_mark: 支持和等标签打印机。
yarn add pdf-to-printer
npm install --save pdf-to-printer
将PDF文件打印到默认打印机：
 import ptp from "pdf-to-printer" ;
  . print ( "assets/pdf-sample.pdf" )
  . then ( console . log )
  . catch ( 
最近electron-vue项目中遇到打印功能,但是利用浏览器原生的打印功能(window.print())又无法预览打印界面，用户体验极差。后来偶然发现lodop这个神奇的web打印插件，通过把lodop打印插件整合到项目中,解决了问题。不足的是为此用户需要增加一步安装lodop.exe文件的操作。
先生成图片:
lodop的预览功能:
正文开始，接下来说以下具体操作吧。
1. 前往lodop官网下载插件
下载解压后复制LodopFuncs.js到自己的electron-vue项目中(我是