天天看點

PDF.js的使用

一、PDF簡介

pdf.js可以實作在html下直接浏覽pdf文檔,是一款開源的pdf文檔讀取解析插件。

下載下傳位址:https://github.com/mozilla/pdf.js

二、使用場景

最近拿到的任務是實作在網站前端對pdf檔案的預覽,一開始用的pdfObject.js ,但是後來公司要求相容safari浏覽器,但pdfobject.js在火狐和safari下面要下載下傳才能再看,相容性不是太好,是以後來決定換pdf.js插件 ,在谷歌、火狐、safari都可以浏覽

pdfObject.js 和pdf.js的差別  :https://www.cnblogs.com/iPing9/p/7153713.html

三、開發環境

sublime、node.js 、Git

四,使用pdf。js

(一)下載下傳檔案(從下載下傳位址解壓出來是這樣子的)

PDF.js的使用
PDF.js的使用

但是缺少了一個必備的build檔案,其中包含pdf.js和pdf.worker.js (搞得我搞了好長時間,結果沒成功)  可以到本人的 資源中去下載下傳,名字是pdfjs-build -包含pdf.js和pdf.worker.js檔案

下載下傳之後放在與web同一目錄下  

PDF.js的使用

根據pdf.js的官網步驟進行安裝依賴的包和啟動  就可以在頁面上看到加載的pdf

PDF.js的使用

(二)、一個頁面 局部加載pdf 我使用的是 iframe 标簽

1)首先我把pdf.js 當做一個整體的插件iframe進另一個頁面局部

檔案目錄是這樣放的

PDF.js的使用

在個人中心頁面,需要加載的地方就可以使用iframe來加載了

PDF.js的使用

因為我們隻做前端頁面,後面接口聯調是背景人員來做,後天那塊就不太熟悉了,是以就分享心得到這裡

另外推薦下對我使用pdf.js 有很大幫助的部落格

這個涉及了背景的知識

http://blog.csdn.net/m0_38021128/article/details/70868407

這個分享了幾種方式加載的 也講解了一些檔案中js的作用和修改pdf.js的路徑在哪

http://blog.csdn.net/li_cheng_liang/article/details/75332938#comments

還有最後一個

http://blog.csdn.net/zsr_251/article/details/50127117