PDF 文件在線預覽(pdf.js 使用教程)

因項目開發須要在線展現 PDF文件，爲解決 PDF文件 在瀏覽器打開後電子簽章、電子簽名等展現不全且部分瀏覽器兼容問題特利用pdf.js解決該問題；
pdf.js框架爲HTML5,無需任何本地支持，兼容性極好只要瀏覽器支持 HTML5 便可(聽說 IE9 以上都是能夠的)；
當時解決該問題探索時間比較長，其實也並無想象的那麼困難比較簡單特此記錄下此博客，以便你們參考！

pdf.js git地址 : https://github.com/mozilla/pd...
(也可上 pdf.js官網自行下載包) 有相關基本簡介、獲取源碼及構建

以自行下載包爲例
項目構建後 會出現以下兩個靜態文件夾：

build目錄是PDF.js的核心文件，web目錄是PDF.js的配置與顯示文件

viewer.html是用來顯示PDF文件的跳轉頁面，viewer.js是其對應配置文件，在viewer.js中：

靜態替換PDF文件路徑 此時即可經過訪問viewer.html對應路徑查看並操做當前 靜態PDF文件路徑

有的小夥伴會說了這根本知足不了當前項目需求嘛 誰的PDF文件會是靜態的 對嘍 想到這就說明你們在思考了那麼接下來我就向你們簡單介紹下動態生成的PDF文件地址該如何賦值~

首先要注意咱們的PDF文件有兩種方法能夠帶入進viewer.html中展現

1. 將指定PDF文件放在 web文件夾下 經過指定引入靜態文件方式引入
2. 將PDF文件放入服務上以服務地址讀取

下面重點講下 經過接口返回地址拿到地址並展現廢話很少說直接上代碼：


同時我麼們還要將源碼中的判斷跨域代碼註釋掉
當一切作完後咱們就能夠實現PDF文件頁面瀏覽但還會發現簽章問題沒有獲得解決 電子生成簽章會不顯示 咱們能夠經過註釋pdf.worker.js源碼的方式來解決該問題

通常狀況下，註釋掉了這三行代碼，不顯示的簽名或者電子簽章就該顯示了。可是 註釋了這三行代碼，仍是報錯誤，並且是 util.js 報的
因此第二種方法 咱們在 pdf.worker.js 中找一下報錯位置

與控制檯報錯警告很像吧，求證後就是他接下來就阻斷他 Perfect

到這兒今天的內容就差很少了,但願能對大家有幫助!!!