使用pdf.js快速實現pdf檢視器
最近準備對專案中的一個線上PDF檢視器元件進行重構下,這個元件最開始用的瀏覽器內建的pdf檢視的功能實現的,在使用中,遇到了很多不大容易解決的問題:
- 不同的瀏覽器樣式不一樣
- 禁止預設檢視器中自帶的下載,列印工具欄按鈕
- 支援不同比例的初始開啟方式
- 定位到指定頁
對於這些問題,最直接想到的方式是使用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檢視器了。如果後續有更多的需求,再繼續更新此文章。