【翻译】如何使用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.htmlrenderer.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 ??榇蚩桓鑫募≡穸曰翱颉5庇没а≡窳艘桓鑫募?,我们就创建一个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有任何疑问,请 联系我们,我们将竭诚为您服务!

翻译后记:

  1. 我是在项目中使用Electron封装项目的web程序过程中遇到了pdf插件失效的问题,才发现的这篇文章,虽然和我们的程序有差别(我们是纯web,这个Electron用web布局),但是pdf.js的使用启发了我,则在项目中修改成了pdf.js的查看方式后,问题解决。
    在纯web项目引用PDF.js有稍微差别。不过也是iframe方式,还是很简单的,代码都差不多。

  2. 如果是想单纯在Electron使用PDF.js可以直接使用已经封装好的npm包:https://www.npmjs.com/package/electron-pdf-window

最后编辑于
?著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,128评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,316评论 3 388
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事?!?“怎么了?”我有些...
    开封第一讲书人阅读 159,737评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,283评论 1 287
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,384评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,458评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,467评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,251评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,688评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,980评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,155评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,818评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,492评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,142评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,382评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,020评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,044评论 2 352

推荐阅读更多精彩内容

  • [转载自http://get.ftqq.com/7870.get] <link rel="icon" type="...
    起航者de风景阅读 4,212评论 0 2
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,460评论 1 45
  • 柔巴依《南阳四首》 “南都行” 青山历历 近可染眉如黛 青山隐隐 远欲欺眼如花 渐远 叠几层青青如琴瑟 渐淡 那一...
    梅溪仙子阅读 265评论 0 0
  • 就像诗人遗忘了爱情, 我也在余烬里寻找燃烧的热情。 不似当年,不再是满纸荒唐言, 熄灭了如爱情般水月镜花的灵感。 ...
    孤笔题岁月阅读 285评论 5 8
  • 一 从小喜欢玩捉迷藏 喜欢那种趴在草丛一动不动的感觉 喜欢屏住呼吸 等待寻你的人 长大以后未曾料到 会一直和你玩藏...
    肖云cc阅读 653评论 0 0