【翻译】如何使用Electron和PDF.js构建一个PDF查看软件

原文链接：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。

完成后的目录结构，看起来下面这张图:

【翻译】如何使用Electron和PDF.js构建一个PDF查看软件_第1张图片

generic

你还配置Electron静态资源目录。打开 package.json添加如下代码：

"build": {
  "extraResources": ["./public/**"]
}

4. 创建查看器

用下面的代码替换 src/index.html内容：



  
    
    Hello World!

这个页面就是应用的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的下面添加一行代码:

这将 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