一、PDF介紹
PDF.js是一個由HTML5建立的PDF閱讀器。依托開源社區驅動和Mozilla實驗室的技術支持。目標是建立一個通用的，基於web的解析和渲染PDF文件的平台。https://github.com/ChineseDron/pdf.js# 是從Mozilla原版中fork出來的一個版本，原版的鏈接在這里https://github.com/mozilla/pdf.js 原版的版次新一些，我們用原版。
原文鏈接：https://blog.csdn.net/xiangcns/article/details/42089189
1、下載地址
到PDFJS官網 http://mozilla.github.io/pdf.js/getting_started/#download,下載pdfjs插件包，注意下載Stable穩定版的包。將下載的壓縮包解壓並放入項目中。
2、壓縮包組成
二、PDFjs插件用法
1、主要用法
在 iframe 標簽中使用。假設 pdfjs 包放在目錄 ../static 下。則寫法如下：
1 <iframe id="previewpdf" src=""../static/pdfjs/web/viewer.html?file="+url+"#page=1" width="100%" frameborder="0"></iframe>
其中，src中的url是pdf文件的預覽地址、page是設置pdf打開時從第一頁開始顯示。
樣例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>pdf文件預覽</title> 6 <script src="../JavaScript/jquery-2.2.4.js"></script> 7 <script type="text/JavaScript"> 8 $(function () { 9 var url = getPdfPreviewUrl(); //獲取pdf預覽地址 10 $("#pdfContainer").attr("src", "../static/pdfjs/web/viewer.html?file="+url+"#page=1"); 11 }); 12 </script> 13 </head> 14 <body> 15 <div id="showPdf"> 16 <iframe id="pdfContainer" src="" width="100%" frameborder="0"></iframe> 17 </div> 18 </body> 19 </html>
三、解決網絡路徑跨域問題
1、問題描述：訪問則出現如下錯誤。提示：跨域訪問被禁止。
2、解決方案
方法1：Windows 服務端，IIS配置允許跨域設置。
1）找到網站Http響應標頭，如圖
2）雙擊HTTP響應標頭，進入添加編輯頁。
如圖所示添加：
代碼如下：Access-Control-Allow-Origin 值：*
Access-Control-Allow-Headers 值：Content-Type, api_key, Authorization
Access-Control-Allow-Methods 值：POST, GET, OPTIONS
Access-Control-Max-Age 值：60 (自定義設置)
方法2：直接配置網站的Web.config
代碼如下：
1 <httpProtocol> 2 <customHeaders> 3 <add name="Access-Control-Allow-Origin" value="*" /> 4 <add name="Access-Control-Allow-Headers" value="Content-Type, api_key, Authorization" /> 5 <add name="Access-Control-Allow-Methods" value="POST, GET, OPTIONS" /> 6 <add name="Access-Control-Max-Age" value="60" /> 7 </customHeaders> 8 </httpProtocol>
位置如圖：
四、常見錯誤解決方法
1、頁面文件名稱顯示中文出現亂碼問題
這屬於js中文亂碼問題，你看中文文件名完全沒有識別出來，看一下你的viewer.html文件在<head>標記是不是有這句：<meta charset="utf-8">
換成：<meta http-equiv="Content-Type" content="text/html" charset="gb2312" > 就可以啦！說白了就是charset換成gb2312
2、路徑問題
viewer.html可以通過頁面參數傳值的方式加載pdf文件，比如我們想打開09.pdf文件的話，只需要這樣：
先把viewer.js中的參數修改為空：
var DEFAULT_URL = ''; //新版本不需要
然后把url改寫為參數傳值：http://localhost:54175/PDFJSInNet/web/viewer.html?file=09.pdf
如果pdf文件與viewer.html不在一層目錄中，改成相對路徑即可：http://localhost:54175/PDFJSInNet/web/viewer.html?file=../doc/09.pdf
非常容易通過Visual Studio控制后台代碼動態拼出這樣一個url字符串。
參考網址：http://www.zyiz.net/tech/detail-94060.html
https://blog.csdn.net/xiangcns/article/details/42089189