天天看點

h5使用pdf.js預覽pdf檔案

一.下載下傳pdf.js

     官網位址:

     http://mozilla.github.io/pdf.js/

h5使用pdf.js預覽pdf檔案

下載下傳穩定版本

h5使用pdf.js預覽pdf檔案

解壓以後會看到如下檔案,将整個檔案夾部署到服務端,這裡我們先用本地服務進行測試,為了友善我們在hbuilder裡測試一下

h5使用pdf.js預覽pdf檔案

發現可以加載預設的pdf

h5使用pdf.js預覽pdf檔案

那麼怎麼顯示我們自己的pdf呢

需要在url上加上自己檔案的路徑

http://127.0.0.1:8020/new/web/viewer.html?file=../test/test.pdf

也可以是絕對路徑

http://127.0.0.1:8020/new/web/viewer.html?file=http://127.0.0.1:8020/new/test/test.pdf

h5使用pdf.js預覽pdf檔案

三.修改title,

本地測試完畢,将檔案夾部署到測試伺服器

在手機端測試一下,開始我們打開pdf時直接跳到這url,發現頁面的title不是我們的pdf檔案名,然後我們打開代碼,根據我們的url對如下代碼做了适當調整

h5使用pdf.js預覽pdf檔案

發現部分手機還會偶發設定不成功,由于我們是混合開發,可以調用原生設定 title的方法,最後我們吧url嵌套到一個iframe中,在iframe中打開這個url,調用原生設定title的方法,設定成功

h5使用pdf.js預覽pdf檔案
h5使用pdf.js預覽pdf檔案