最近準備對專案中的一個線上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檢視器了。如果後續有更多的需求，再繼續更新此文章。