使用pdf.js快速實現pdf查看器

最近準備對項目中的一個在線PDF查看器組件進行重構下，這個組件最開始用的瀏覽器內置的pdf查看的功能實現的，在使用中，遇到了很多不大容易解決的問題：

1. 不同的瀏覽器樣式不一樣
2. 禁止默認查看器中自帶的下載，打印工具欄按鈕
3. 支持不同比例的初始打開方式
4. 定位到指定頁

對於這些問題，最直接想到的方式是使用pdfjs自繪製來實現，試了一下後，發現工作量還不小。同時，發現官方自帶的實例就有一個非常完整功能的pdf查看器Demo。

官方的這個實例基本上該有的都有了，所以我就不準備重複造輪子了，就在官方的這個基礎上改了下。本文簡單的記錄了下探索過程。

程序包下載

首先可以從它官方的發佈頁中下載最新的發佈包，解壓後可以看到這樣的衣蛾文件結構。

        

其中build\pdf.js就是pdfjs的渲染內核，web文件夾下則是默認的查看器，它依賴於build\pdf.js渲染，如果我們完全是自己製作查看器的話是可以不需要web文件夾的，由於這裏我是基於默認的查看器修改的，所以一併帶了進來。

將pdf.js的發佈包直接作爲靜態頁面掛到站點上，就可以從viewer.html中查看到和官方几乎一樣的界面了。

語言包加載

和官方示例最大的區別是：我們的查看器不是中文的，分析下可以看出，資源文件加載失敗了。

查看了下本地文件是有的，那麼加載失敗的原因應該就是.properties這個特殊的後綴被站點給拒了。解決方案也比較簡單，把這種類型的擴展名放開了即可。

再次加載即可看到中文的界面了。

文件url的傳入

作爲一個查看器，最基礎的需求是能動態加載不同的pdf文件，查看一下，這個功能默認以及支持了，通過file參數傳入即可。官方示例爲：

https://mozilla.github.io/pdf.js/web/viewer.html?file=compressed.tracemonkey-pldi-09.pdf

默認控制參數

默認控制參數官方文檔中也有提及。通過#的錨點方式傳入，示例爲：#page=2&zoom=200

具體支持的參數爲：

• page: 頁碼，例: page=2
• zoom: 縮放比例. 例: zoom=200 。此參數還支持幾個特殊的值：
  • auto：自動縮放
  • page-actual：實際大小
  • page-fit：適合頁面
  • page-width：適合寬度
• nameddest: 書籤，沒用過
• pagemode: 側邊欄狀態，支持範圍爲：none thumbs bookmarks attachments

另外，查看器右側中有一個按鈕，點擊它即可看到當前位置參數，可以查看當前的zoom，page參數，方便我們參考。

    

隱藏工具欄

官方提供的定製並不多，一般我們日常用到的更多的定製是隱藏默認工具欄上的一些按鈕，不過pdfjs viewer是一個html文件，定製起來是非常容易的。

    

首先用F12工具獲取其html代碼位置，將樣式設爲隱藏即可。（不要直接刪了，後面的js依賴着這些工具欄的）

這種方式非常原始了，後續有時間的話把代碼擴展下，做成參數集成到url中更加方便些。

小結

到此爲止，我的需求基本上都能滿足，並不需要深入到pdfjs的核心就能快速的實現一個功能強大的pdf查看器了。如果後續有更多的需求，再繼續更新此文章。