原文链接：https://www.pdftron.com/blog/electron/how-to-build-an-electron-pdf-viewer/
Electron 是一个使用web技术创建跨平台桌面应用的开源框架。这篇文章将教你怎样使用PDF.js在Electron app中构建一个自己的桌面PDF查看软件。
1. 下载和安装 Electron
原文这里写的下载和安装Electron，但是内容只有一个获取快速开始的模板，并没有下载和安装Electron，具体怎么安装，各位看官，请移步Electron 官网，首页就有安装方法，非常直观和方便。
Electron提供一个方便快速开始的模板仓库，里面包含了启动一个最小桌面程序所需的全部文件。下载并开始：
git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
执行完上面三个步骤，直接运行npm start 就可以启动桌面程序了。
npm start
你将会看到从你桌面上弹出一个 hello world 应用程序。
2. 配置项目结构
为了保持整洁，我们稍微整理下目录结构，创建源码目录 src 并把 index.html 和 renderer.js 移动进去。
在 main.js中, 把这行代码：
mainWindow.loadFile('index.html')
改成:
mainWindow.loadFile('src/index.html')
然后, 在 /src/中, 创建 index.css 文件用于APP的界面样式定义。
3.下载 PDF.js
在项目根目录创建public文件夹。然后将下载的PDF.js文件夹放到这里面。
点击这里here 下载并解压PDF.js文件并放到 public 目录中。 为了方便使用, 把解压的PDF.js文件夹改名为 pdfjs。
完成后的目录结构，看起来下面这张图:
generic
你还配置Electron静态资源目录。打开 package.json添加如下代码：
"build": {
"extraResources": ["./public/**"]
}
4. 创建查看器
用下面的代码替换 src/index.html内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<link rel='stylesheet' href='./index.css'>
</head>
<body>
<div class='picker'>
<button id='myButton'>Select PDF to view</button>
</div>
<div class='viewer' id='viewer'>
</div>
<script>
require('./renderer.js');
</script>
</body>
</html>
这个页面就是应用的UI界面。我们创建一个按钮用于选择本地的pdf文件，创建一个id为viewer 的 div 用于显示pdf内容。自定义样式写在index.css中，并通过link引入进来。
在 src/index.css中添加如下代码：
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
div.picker {
width: 100%;
height: 40px;
background-color: #222222;
display: flex;
justify-content: center;
align-items: center;
}
div.viewer {
width: 100%;
height: calc(100% - 40px);
}
div.viewer iframe {
width: 100%;
height: 100%;
}
上面的代码添加了基本的布局，是整个页面的填满整个窗口，查看器的宽高都调成了100%。
现在可以添加JS逻辑了， 修改 src/renderer.js 代码如下:
const { dialog } = require('electron').remote;
const path = require('path');
// 给按钮添加时间监听
document.getElementById('myButton').addEventListener('click', () => {
// 当点击按钮时，就弹出一个选择pdf文件的窗口。
dialog.showOpenDialog({
properties: ['openFile'], // 设置为打开文件的弹窗
filters: [ { name: "PDFs", extensions: ['pdf'] } ] // 过滤文件，只能选择pdf
}, (filepaths) => {
// Since we only allow one file, just use the first one
const filePath = filepaths[0];
const viewerEle = document.getElementById('viewer');
viewerEle.innerHTML = ''; // 清空上次的内容
//创建一个iframe指向咋们的PDF.js查看器。并把选择的pdf文件路劲当做file参数传递过去。
const iframe = document.createElement('iframe');
iframe.src = path.resolve(__dirname, `../public/pdfjs/web/viewer.html?file=${filePath}`);
// 把iframe添加到页面中。
viewerEle.appendChild(iframe);
})
})
这个代码使用Electron的 dialog 模块打开一个文件选择对话框。当用户选择了一个文件，我们就创建一个iframe载入PDF.js的Viewer。我们通过查询参数告知PDF.js需要打开的文件路径。
好了! 现在执行 npm start 以开发模式启动 Electron 应用。马上就会看到我们上面所写的界面。
当你点击按钮，就会弹出一个选择文件的对话框，选择一个pdf文件，选中之后PDF.js viewer就会渲染这个pdf文件。
到现在为止，我们已经我们的Electron应用程序中实现了PDF的查看功能。但是我们还想添加更多的功能，比如注释，PDF操作，以及支持更多的文件类型。 then open source software just won't cut it.（这句不知道怎么翻译比较好）
这就是PDFTron的 WebViewer的用武之地！它提供开箱即用的所有这些功能，无需配置。我们可以像PDF.js一样轻松地将它实现到我们的Electron应用程序中（免费）。
使用WebViewer实现
要实现这个查看器, 首先需要 注册免费试用. 出测完成后, 下载WebViewer 程序包 将内容解压到 public 文件夹中。
现在我们需要引入 WebViewer 文件。在 src/index.html的 <head>下面添加一行代码:
<script src='../public/WebViewer/lib/webviewer.min.js'></script>
这将 WebViewer 加载在全局上下文以供使用。
现在我们需要改变按钮的点击事件，使用WebViewer替代PDF.js。 为了演示，我们创建一个新的renderer-webviewer.js 文件并添加如下代码：
const { dialog } = require('electron').remote;
const path = require('path');
// 给按钮添加监听事件
document.getElementById('myButton').addEventListener('click', () => {
// 当按钮被点击则弹出一个文件选择对话框。
dialog.showOpenDialog({
properties: ['openFile'], // 设置文件打开对话框
filters: [ { name: "PDFs", extensions: ['pdf'] } ] // 过滤pdf文件类型
}, (filepaths) => {
// 只能选择一个文件，直接使用第一个。
const filePath = filepaths[0];
const viewerEle = document.getElementById('viewer');
viewerEle.innerHTML = ''; // 清空之前的内容
// 创建一个WebViewer实例.
new window.PDFTron.WebViewer({
path: '../public/WebViewer/lib',
l: '你的密钥写在这里',
initialDoc: filePath
}, viewerEle)
})
})
这个和 PDF.js 的步骤大致相同, 只是使用WebViewer的实例代替了iframe。
现在需要修改为新的js文件。将src/index.html 中的：
require('./renderer.js');
改为:
require('./renderer-webviewer.js');
就是这样！
执行 npm start 启动应用程序。 界面几乎没有变化, 只是WebViewer 替代了PDF.js。 你现在可以给pdf文档添加注释了，还有更多的操作。
构建产品程序包
构建步骤根据不同的系统会有所差别，感兴趣的同学可以参考 这个指南 。
结论
这篇文章展示了使用开源的软件构建一个PDF查看程序是多么的容易。我们还了解了如何通过 WebViewer创建功能更丰富的PDF应用程序。
源码 下载.
你可以在这里查看WebViewer的完整演示。对比下 PDF.js viewer!和它的区别。
如果您对在项目中实施WebViewer有任何疑问，请 联系我们，我们将竭诚为您服务！
翻译后记：
-
我是在项目中使用Electron封装项目的web程序过程中遇到了pdf插件失效的问题，才发现的这篇文章，虽然和我们的程序有差别（我们是纯web，这个Electron用web布局），但是pdf.js的使用启发了我，则在项目中修改成了pdf.js的查看方式后，问题解决。
在纯web项目引用PDF.js有稍微差别。不过也是iframe方式，还是很简单的，代码都差不多。 -
如果是想单纯在Electron使用PDF.js可以直接使用已经封装好的npm包：https://www.npmjs.com/package/electron-pdf-window
网友评论