web中顯示PDF

項目需求是要在頁面中直接瀏覽pdf文件

1.網上比較普遍的方法是pdfobject.js和pdf.js

2.pdfobject.js使用比較簡單，但ie兼容性不太好，手機端不支持，不清楚ios，我的手機是安卓

3.pdf.js手機，pc都可以兼容性比較好，傳說可以兼容到ie9以上。但我的ie9並不可以，里面使用了es6，但ie不支持，如果配置了babel等可能可以但沒試過

總結：如果項目需求只有PC端並不需要兼容ie9以下，可以直接使用pdfobject.js，非常簡單。如果移動端也同樣需要，建議直接使用pdf.js

以下為具體使用方法

pdfobject.js：

官網地址：https://pdfobject.com/

兼容性：

參考鏈接：http://www.jq22.com/jquery-info649

<div id="example1"></div>

script src="js/pdfobject.js"></script>
<script>PDFObject.embed("pdf/sample-3pp.pdf", "#example1");</script>

pdf.js

官網：http://mozilla.github.io/pdf.js/

線上有很多使用方法博客

以下為我的使用方法

1.下載 -> 解壓后自己新建了文件夾pdfView，把bulid和web文件夾放進去。

2.使用

由於pdf.js需要使用以http://或者https://開頭的服務器地址

所以下載了xampp來構建環境

裝好后開啟xampp的apach

 

把pfdView放到xampp的htdocs中

在瀏覽器中輸入http://localhost/pdfView/web/viewer.html,出現pdf文件就顯示成功了

3.在項目中使用

把pfdView整個放入項目文件中

 

在html中使用ifram，這樣就能顯示了

 

<iframe style="width: 100%;height:100%;" frameborder=”no” border=”0″ id="pdfContainer" src="http://localhost/pdfView/web/viewer.html?file=http://localhost/sample-3pp.pdf"></iframe>

需要注意的是pdf.js不支持跨域，所以file后面的域名和viewer.html的域名要相同

修改file后面的值就可以修改pdf文件

4.由於域名不一定是固定的，為了測試和線上方便，不需要手動改域名，所以用js給ifram的src動態賦值

function getPDFurl(filePath) { //獲取pdf鏈接並賦值
    if (!window.location.origin) {  //兼容ie9中不支持window.location.origin情況
        window.location.origin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port: '');
    }
    var currentWWWOrigin = window.location.origin;
    var filePath = filePath || 'sample-3pp.pdf'
    var pdfSrc = currentWWWOrigin + '/pdfView/web/viewer.html?file=' + currentWWWOrigin + '/' + filePath; // pdf文件拼接成pdf.js需要的路徑
    $("#pdfContainer").attr("src", pdfSrc); // 將路徑填充到iframe的src里面
}

以上全部流程結束啦

使用服務器的方式，localhost或者ip地址的方式打開項目