我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

electron加载pdf的问题,还真是一个历史性的难题。说难也难,说简单也简单。本篇文章中,苏南大叔简要的说说,在electron中显示pdf文件的几个解决方案。来解答一下,在electron中,如何加载显示pdf的这个历史性谜团。

苏南大叔:electron 如何加载解析 pdf 文件?三大方案解决问题 - electron-pdf
electron 如何加载解析 pdf 文件?三大方案解决问题(图6-1)

方案总体上总结如下:

newsn.net:这里是【评论】可见内容

通用方案一,pdf.js

无视electron版本号,通用方案就是:使用pdf.js来加载pdf文件,这个方案最靠谱。pdfjs开源代码,可以参见下面这个地址:

官方的pdf.js源码里面,代码太多,完全不合适小白学习使用。那么,大家无脑入门的话,就记得下面这个地址即可:

http://<host>/pdfjs/web/viewer.html?file=pdf.pdf

苏南大叔:electron 如何加载解析 pdf 文件?三大方案解决问题 - pdfjs-viewer
electron 如何加载解析 pdf 文件?三大方案解决问题(图6-2)

当然,在electron中的时候,上述http://字样,可以替换成file://。您可以使用loadURL()方法load对应的view.html,还可以使用iframe或者webview加载对应的view.html,都是可以显示pdf.pdf这个文件的。

file://<path>/pdfjs/web/viewer.html?file=pdf.pdf

可能的渲染进程使用方式是:

newsn.net:这里是【评论】可见内容

可能的主进程使用方式是:

newsn.net:这里是【评论】可见内容

通用方案二,electron-pdf-window

electron-pdf-windowgithub上的开源项目,还是挺好用的。但是:这个项目有个弊端就是:只能在一整个的窗口中打开pdf文件,而不能在窗口的一部分中加载pdf

并且,这个开源项目的背后,还是pdf.js。大家可以查看这个文件:

苏南大叔:electron 如何加载解析 pdf 文件?三大方案解决问题 - electron-pdf-window-indexjs
electron 如何加载解析 pdf 文件?三大方案解决问题(图6-3)

其实这个代码的原理,就是:

file://<path>/pdfjs/web/viewer.html?file=pdf.pdf

只不过,正常情况下来说,浏览器不支持file协议,而electron天生支持这种file协议。

使用方式是:

npm install electron-pdf-window --save
const { app } = require('electron')
const PDFWindow = require('electron-pdf-window')

app.on('ready', () => {
  const win = new PDFWindow({
    width: 800,
    height: 600
  })

  win.loadURL('http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf')
})

解决方案三,低版本electron加载pdf

electron1.x/2.x系列可用,但是electron3.x系列是不支持的,因为3.x系列,官方表示:由于人手不足的原因,暂不支持pdf了。embed标签,是不能识别的,当然,object标签也必然是不能识别的。

PDF Viewer is currently not working but is being worked on and will be functional once again soon。

plugins+iframe(推荐)

创建window的时候,要注意开启plugins,然后html代码里面使用iframe进行加载。

main.js要开启plugins:

mainWindow = new PDFWindow({'webPreferences':{'plugins': true}});

index.html使用iframe:

<iframe src="pdf.pdf"></iframe> 

苏南大叔:electron 如何加载解析 pdf 文件?三大方案解决问题 - electron2
electron 如何加载解析 pdf 文件?三大方案解决问题(图6-4)

webview + plugins

<webview src="pdf.pdf" plugins></webview>
electron官方已经不推荐使用webview标签,推荐使用iframe代替

苏南大叔:electron 如何加载解析 pdf 文件?三大方案解决问题 - electron2-webview-pdf
electron 如何加载解析 pdf 文件?三大方案解决问题(图6-5)

苏南大叔:electron 如何加载解析 pdf 文件?三大方案解决问题 - electron1-webview-pdf
electron 如何加载解析 pdf 文件?三大方案解决问题(图6-6)

总结

传统的objectembed这两个标签,electron都是不支持的,请知悉,大家就不用做无谓的相关尝试了。这几种pdf加载方案都各有利弊,大家根据自己的实际情况选择吧。

请支持苏南大叔的electron相关经验文章:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   electron    pdf