PDF 文件在線預(yù)覽(pdf.js 使用教程)
來源：SegmentFault 思否
作者：會鵬
因項目開發(fā)需要在線展示 PDF文件，為解決 PDF文件 在瀏覽器打開后電子簽章、電子簽名等展示不全且部分瀏覽器兼容問題特利用pdf.js解決該問題；
pdf.js框架為HTML5,無需任何本地支持，兼容性極好只要瀏覽器支持 HTML5 即可(據(jù)說 IE9 以上都是可以的)；
當(dāng)時解決該問題探索時間比較長，其實也并沒有想象的那么困難比較簡單特此記錄下此博客，以便大家參考！
pdf.js git地址 :https://github.com/mozilla/pdf.js
(也可上 pdf.js官網(wǎng)自行下載包) 有相關(guān)基本簡介、獲取源碼及構(gòu)建
以自行下載包為例
項目構(gòu)建后 會出現(xiàn)如下兩個靜態(tài)文件夾：
build目錄是PDF.js的核心文件，web目錄是PDF.js的配置與顯示文件
viewer.html是用來顯示PDF文件的跳轉(zhuǎn)頁面，viewer.js是其對應(yīng)配置文件，在viewer.js中：
靜態(tài)替換PDF文件路徑 此時便可通過訪問viewer.html對應(yīng)路徑查看并操作當(dāng)前?
靜態(tài)PDF文件路徑
有的小伙伴會說了這根本滿足不了當(dāng)前項目需求嘛 誰的PDF文件會是靜態(tài)的 對嘍 想到這就說明大家在思考了那么接下來我就向大家簡單介紹下動態(tài)生成的PDF文件地址該如何賦值~
首先要注意我們的PDF文件有兩種方法可以帶入進(jìn)viewer.html中展示
將指定PDF文件放在 web文件夾下 通過指定引入靜態(tài)文件方式引入 將PDF文件放入服務(wù)上以服務(wù)地址讀取
下面重點(diǎn)講下 通過接口返回地址拿到地址并展示廢話不多說直接上代碼：
同時我么們還要將源碼中的判斷跨域代碼注釋掉
當(dāng)一切做完后我們就可以實現(xiàn)PDF文件頁面瀏覽但還會發(fā)現(xiàn)簽章問題沒有得到解決 電子生成簽章會不顯示 我們可以通過注釋pdf.worker.js源碼的方式來解決該問題
一般情況下，注釋掉了這三行代碼，不顯示的簽名或者電子簽章就該顯示了。但是 注釋了這三行代碼，還是報錯誤，而且是 util.js 報的
所以第二種方法 我們在 pdf.worker.js 中找一下報錯位置
與控制臺報錯警告很像吧，求證后就是他接下來就阻斷他 Perfect
到這兒今天的內(nèi)容就差不多了,希望能對你們有幫助!!!
