原文鏈接：https://www.pdftron.com/blog/electron/how-to-build-an-electron-pdf-viewer/
Electron 是一個(gè)使用web技術(shù)創(chuàng)建跨平臺(tái)桌面應(yīng)用的開源框架战惊。這篇文章將教你怎樣使用PDF.js在Electron app中構(gòu)建一個(gè)自己的桌面PDF查看軟件伟件。
1. 下載和安裝 Electron
原文這里寫的下載和安裝Electron名眉，但是內(nèi)容只有一個(gè)獲取快速開始的模板出刷，并沒有下載和安裝Electron，具體怎么安裝戳稽，各位看官筹陵，請(qǐng)移步Electron 官網(wǎng)益老，首頁就有安裝方法闯参，非常直觀和方便瞻鹏。
Electron提供一個(gè)方便快速開始的模板倉庫悲立，里面包含了啟動(dòng)一個(gè)最小桌面程序所需的全部文件。下載并開始：
git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
執(zhí)行完上面三個(gè)步驟新博，直接運(yùn)行npm start 就可以啟動(dòng)桌面程序了薪夕。
npm start
你將會(huì)看到從你桌面上彈出一個(gè) hello world 應(yīng)用程序。
2. 配置項(xiàng)目結(jié)構(gòu)
為了保持整潔叭披，我們稍微整理下目錄結(jié)構(gòu)寥殖，創(chuàng)建源碼目錄 src 并把 index.html 和 renderer.js 移動(dòng)進(jìn)去玩讳。
在 main.js中, 把這行代碼：
mainWindow.loadFile('index.html')
改成:
mainWindow.loadFile('src/index.html')
然后, 在 /src/中, 創(chuàng)建 index.css 文件用于APP的界面樣式定義涩蜘。
3.下載 PDF.js
在項(xiàng)目根目錄創(chuàng)建public文件夾。然后將下載的PDF.js文件夾放到這里面熏纯。
點(diǎn)擊這里here 下載并解壓PDF.js文件并放到 public 目錄中同诫。 為了方便使用, 把解壓的PDF.js文件夾改名為 pdfjs。
完成后的目錄結(jié)構(gòu)樟澜，看起來下面這張圖:
你還配置Electron靜態(tài)資源目錄误窖。打開 package.json添加如下代碼：
"build": {
"extraResources": ["./public/**"]
}
4. 創(chuàng)建查看器
用下面的代碼替換 src/index.html內(nèi)容：
<!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>
這個(gè)頁面就是應(yīng)用的UI界面。我們創(chuàng)建一個(gè)按鈕用于選擇本地的pdf文件秩贰，創(chuàng)建一個(gè)id為viewer 的 div 用于顯示pdf內(nèi)容霹俺。自定義樣式寫在index.css中，并通過link引入進(jìn)來毒费。
在 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%;
}
上面的代碼添加了基本的布局丙唧，是整個(gè)頁面的填滿整個(gè)窗口，查看器的寬高都調(diào)成了100%觅玻。
現(xiàn)在可以添加JS邏輯了想际， 修改 src/renderer.js 代碼如下:
const { dialog } = require('electron').remote;
const path = require('path');
// 給按鈕添加時(shí)間監(jiān)聽
document.getElementById('myButton').addEventListener('click', () => {
// 當(dāng)點(diǎn)擊按鈕時(shí)，就彈出一個(gè)選擇pdf文件的窗口溪厘。
dialog.showOpenDialog({
properties: ['openFile'], // 設(shè)置為打開文件的彈窗
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 = ''; // 清空上次的內(nèi)容
//創(chuàng)建一個(gè)iframe指向咋們的PDF.js查看器。并把選擇的pdf文件路勁當(dāng)做file參數(shù)傳遞過去畸悬。
const iframe = document.createElement('iframe');
iframe.src = path.resolve(__dirname, `../public/pdfjs/web/viewer.html?file=${filePath}`);
// 把iframe添加到頁面中侧甫。
viewerEle.appendChild(iframe);
})
})
這個(gè)代碼使用Electron的 dialog 模塊打開一個(gè)文件選擇對(duì)話框。當(dāng)用戶選擇了一個(gè)文件蹋宦，我們就創(chuàng)建一個(gè)iframe載入PDF.js的Viewer披粟。我們通過查詢參數(shù)告知PDF.js需要打開的文件路徑。
好了! 現(xiàn)在執(zhí)行 npm start 以開發(fā)模式啟動(dòng) Electron 應(yīng)用妆档。馬上就會(huì)看到我們上面所寫的界面僻爽。
當(dāng)你點(diǎn)擊按鈕，就會(huì)彈出一個(gè)選擇文件的對(duì)話框贾惦，選擇一個(gè)pdf文件胸梆，選中之后PDF.js viewer就會(huì)渲染這個(gè)pdf文件敦捧。
到現(xiàn)在為止，我們已經(jīng)我們的Electron應(yīng)用程序中實(shí)現(xiàn)了PDF的查看功能碰镜。但是我們還想添加更多的功能兢卵，比如注釋，PDF操作绪颖，以及支持更多的文件類型秽荤。 then open source software just won't cut it.（這句不知道怎么翻譯比較好）
這就是PDFTron的 WebViewer的用武之地！它提供開箱即用的所有這些功能柠横，無需配置窃款。我們可以像PDF.js一樣輕松地將它實(shí)現(xiàn)到我們的Electron應(yīng)用程序中（免費(fèi)）。
使用WebViewer實(shí)現(xiàn)
要實(shí)現(xiàn)這個(gè)查看器, 首先需要 注冊(cè)免費(fèi)試用. 注冊(cè)完成后, 下載WebViewer 程序包 將內(nèi)容解壓到 public 文件夾中牍氛。
現(xiàn)在我們需要引入 WebViewer 文件晨继。在 src/index.html的 <head>下面添加一行代碼:
<script src='../public/WebViewer/lib/webviewer.min.js'></script>
這將 WebViewer 加載在全局上下文以供使用。
現(xiàn)在我們需要改變按鈕的點(diǎn)擊事件搬俊，使用WebViewer替代PDF.js紊扬。 為了演示，我們創(chuàng)建一個(gè)新的renderer-webviewer.js 文件并添加如下代碼：
const { dialog } = require('electron').remote;
const path = require('path');
// 給按鈕添加監(jiān)聽事件
document.getElementById('myButton').addEventListener('click', () => {
// 當(dāng)按鈕被點(diǎn)擊則彈出一個(gè)文件選擇對(duì)話框唉擂。
dialog.showOpenDialog({
properties: ['openFile'], // 設(shè)置文件打開對(duì)話框
filters: [ { name: "PDFs", extensions: ['pdf'] } ] // 過濾pdf文件類型
}, (filepaths) => {
// 只能選擇一個(gè)文件餐屎，直接使用第一個(gè)。
const filePath = filepaths[0];
const viewerEle = document.getElementById('viewer');
viewerEle.innerHTML = ''; // 清空之前的內(nèi)容
// 創(chuàng)建一個(gè)WebViewer實(shí)例.
new window.PDFTron.WebViewer({
path: '../public/WebViewer/lib',
l: '你的密鑰寫在這里',
initialDoc: filePath
}, viewerEle)
})
})
這個(gè)和 PDF.js 的步驟大致相同, 只是使用WebViewer的實(shí)例代替了iframe玩祟。
現(xiàn)在需要修改為新的js文件腹缩。將src/index.html 中的：
require('./renderer.js');
改為:
require('./renderer-webviewer.js');
就是這樣！
執(zhí)行 npm start 啟動(dòng)應(yīng)用程序卵凑。 界面幾乎沒有變化, 只是WebViewer 替代了PDF.js庆聘。 你現(xiàn)在可以給pdf文檔添加注釋了，還有更多的操作勺卢。
構(gòu)建產(chǎn)品程序包
構(gòu)建步驟根據(jù)不同的系統(tǒng)會(huì)有所差別伙判，感興趣的同學(xué)可以參考 這個(gè)指南 。
結(jié)論
這篇文章展示了使用開源的軟件構(gòu)建一個(gè)PDF查看程序是多么的容易黑忱。我們還了解了如何通過 WebViewer創(chuàng)建功能更豐富的PDF應(yīng)用程序宴抚。
源碼 下載.
你可以在這里查看WebViewer的完整演示。對(duì)比下 PDF.js viewer!和它的區(qū)別甫煞。
如果您對(duì)在項(xiàng)目中實(shí)施WebViewer有任何疑問菇曲，請(qǐng) 聯(lián)系我們，我們將竭誠(chéng)為您服務(wù)抚吠！
翻譯后記：
我是在項(xiàng)目中使用Electron封裝項(xiàng)目的web程序過程中遇到了pdf插件失效的問題常潮，才發(fā)現(xiàn)的這篇文章，雖然和我們的程序有差別（我們是純web楷力，這個(gè)Electron用web布局）喊式，但是pdf.js的使用啟發(fā)了我孵户，則在項(xiàng)目中修改成了pdf.js的查看方式后，問題解決岔留。
在純web項(xiàng)目引用PDF.js有稍微差別夏哭。不過也是iframe方式，還是很簡(jiǎn)單的献联，代碼都差不多竖配。如果是想單純?cè)贓lectron使用PDF.js可以直接使用已經(jīng)封裝好的npm包：https://www.npmjs.com/package/electron-pdf-window
