使用pdfjs插件在線預覽PDF文件

前言

　　本文介紹在html中使用 pdfjs插件在線預覽PDF文件的方法。javascript

實現步驟

下載 pdfjs 並引入項目中

　　到PDFJS官網 http://mozilla.github.io/pdf.js/getting_started/#download 下載pdfjs插件包，注意下載Stable穩定版的包。將下載的壓縮包解壓並放入項目中。html

使用方法

　　在 iframe 標籤中使用。假設 pdfjs 包放在目錄 ../static 下。則寫法以下：java

<iframe id="previewpdf" src=""../static/pdfjs/web/viewer.html?file="+url+"#page=1" width="100%" frameborder="0"></iframe>

其中，src中的url是pdf文件的預覽地址、page是設置pdf打開時從第一頁開始顯示。jquery

樣例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>pdf文件預覽</title>
        <script src="../javascript/jquery-2.2.4.js"></script>
        <script type="text/javascript"> $(function () { var url = getPdfPreviewUrl(); //獲取pdf預覽地址
 $("#pdfContainer").attr("src", "../static/pdfjs/web/viewer.html?file="+url+"#page=1"); }); </script>
    </head>
    <body>
        <div id="showPdf">
            <iframe id="pdfContainer" src="" width="100%" frameborder="0"></iframe>
        </div>
    </body>
</html>