pdf.js插件的使用

  pdf.js這個插件比較厲害，可以實現很多功能，搜索pdf中的文字，跳轉到指定頁面等等。
  這個插件是比較重量級的，pc端使用的比較多，但是我們項目的需求是要集成到移動端，下面是簡單集成。
 先去網上下載別人打包后的pdf.js的代碼。

 

這個是打包后的pdf.js包，build里面是核心的pdf.js等文件，web文件夾是給出的例子，一個使用了pdf.js寫的一個頁面，包含了各種功能。其中 viewer.html這個文件就是我們需要的 母版的頁面。
關於使用，我們新建一個工程，加入打包后的pdf.js文件，新建一個index.html頁面，直接引用就可以。

  <a href="/PDFJSDemo/PDFJS/pdfjs/web/viewer.html?file=http://***.pdf" target="_blank">test</a>

 /PDFJSDemo/PDFJS/pdfjs/web/viewer.html?file=http://***.pdf 

這個為我們打開pdf文件的url。
‘/PDFJSDemo/PDFJS/pdfjs/web/viewer.html ’這一段為服務器上面放置的母版的html頁面的url路徑。
‘file=’ 這個為連接模板頁面和我們需要嵌入的pdf源文件的url。
http://***.pdf 這個就是我們需要展示的pdf文件路徑了。

 

‘file=’ 這個之前的url為模版html的url，之后為pdf文件的url，這樣就可以了。

問題：這個如果是本地的pdf文件，包內的pdf，或者為域名相同的兩個url，一般不會有什么問題，但是如果域名不同則需要解決跨域的問題。

首先：跨域問題的解決

在viewer.js文件中注釋掉一下代碼：

1 這短代碼就是判斷是否跨域的

  //var fileOrigin = new URL(file, window.location.href).origin;
     // if (fileOrigin !== viewerOrigin) {
     //   throw new Error('file origin does not match viewer\'s');
     // }

 

2 需要服務端去解決，需要服務端做允許跨域的設置。
（這里還有其他網友給出的解決方案，讓服務端返回文件流，這里筆者沒有試這一種方式）

 

其次：服務端給出的是pdf為下載地址的嵌入問題：
調用的時候,用iframe嵌套一下。

url = 'http://www.***/**.pdf';
//url = encodeURIComponent(url);
 xxx.html('<iframe src="pdfreview/web/gzjl.html?file='+url+'" width="100%" height="100%"></iframe>');

然后：分段下載的問題：
如果pdf文件比較大，可能會被要求邊預覽邊下載，這個的話默認是支持的，但是一定要需要服務端也支持才可以。

 

 

 

 

 

如果是相同的域名，處理本地文件，則直接展示的就是邊預覽邊下載的樣子。

 

這里被筆者作出了修改，因為移動端不支持打印和下載，所以被我隱藏了，另外還有搜索功能沒有被放開。這個的話，因為安卓不支持pdf文件的預覽，pdf.js是非常強大的，使用它的話不需要下載移動端的wps等工具就可以查看pdf文件了。

作者：revivefsd
鏈接：https://www.jianshu.com/p/d4ec8808f41d
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。