pdf.js 使用實例

本文轉載自查看原文 2016-10-13 14:47 105640 js

pdf.js可以實現在html下直接瀏覽pdf文檔，是一款開源的pdf文檔讀取解析插件

pdf.js主要包含兩個庫文件，一個pdf.js和一個pdf.worker.js，，一個負責API解析，一個負責核心解析

下載地址：http://cnblogs.com/files/xiangliuyunyang/build.zip

兩個主要demo

1.點擊連接讀取第一頁的pdf文檔：http://www.51purse.com/pdf/web/demo1.html（此處沒有自己上傳）

2.點擊連接，選擇需要打開的文件，進行pdf預覽：http://www.51purse.com/pdf/web/demo2.html（此處沒有自己上傳）

參考代碼：

demo1:

 1 <html>
 2 <head>
 3     <meta charset="UTF-8">
 4     <title>Document</title>
 5     <style type="text/css">
 6         .lightbox{
 7             position: fixed;
 8             top: 0px;
 9             left: 0px;
10             height: 100%;
11             width: 100%;
12             z-index: 7;
13             opacity: 0.3;
14             display: block;
15             background-color: rgb(0, 0, 0);
16         }
17         .pop{
18             position: absolute;
19             left: 50%;
20             width: 894px;
21             margin-left: -447px;
22             z-index: 9;
23         }
24     </style>
25     <script src="Scripts/pdf.js" type="text/javascript"></script>
26     <script type="text/javascript">
27         function showPdf() {
28             var container = document.getElementById("container");
29             container.style.display = "block";
30             var url = 'Scripts/jQuery經典入門教程(絕對詳細).pdf';
31             PDFJS.workerSrc = 'Scripts/pdf.worker.js';
32             PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
33                 pdf.getPage(1).then(function getPageHelloWorld(page) {
34                     var scale = 1;
35                     var viewport = page.getViewport(scale);
36                     var canvas = document.getElementById('the-canvas');
37                     var context = canvas.getContext('2d');
38                     canvas.height = viewport.height;
39                     canvas.width = viewport.width;
40                     var renderContext = {
41                         canvasContext: context,
42                         viewport: viewport
43                     };
44                     page.render(renderContext);
45                 });
46             });
47         }
48     </script>
49 </head>
50 <body>
51     <h1><a href="javascript:void(0)" target="_blank" onclick="showPdf()">顯示pdf文檔</a></h1>
52     <div id="container" style="display: none;">
53         <div class="lightbox"></div>
54         <div id="pop" class="pop">
55             <canvas id="the-canvas"></canvas>
56         </div>
57     </div>
58 </body>
59 </html>

demo2:

<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .lightbox{
            position: fixed;
            top: 0px;
            left: 0px;
            height: 100%;
            width: 100%;
            z-index: 7;
            opacity: 0.3;
            display: block;
            background-color: rgb(0, 0, 0);
            display: none;
        }
        .pop,iframe{
            position: absolute;
            left: 50%;
            top:0;
            width: 893px;
            height: 100%;
            margin-left: -446.5px;
            z-index: 9;
        }
    </style>
    <script src="Scripts/pdf.js" type="text/javascript"></script>
    <script type="text/javascript">
        function showPdf(isShow) {
            var state = "";
            if (isShow) {
                state = "block";
            } else {
                state = "none";
            }
            var pop = document.getElementById("pop");
            pop.style.display = state;
            var lightbox = document.getElementById("lightbox");
            lightbox.style.display = state;
        }
        function close() {
            showPdf(false);
        }
    </script>
</head>
<body>
    <ul>
        <li><a href="Scripts/jQuery經典入門教程(絕對詳細).pdf" target="pdfContainer" onclick="showPdf(true)">0001_pdf</a></li>   
    </ul>
    <div class="lightbox" id="lightbox"></div>
    <div id="pop" class="pop" style="display: none;">
        <a href="javascript:close()" style="
            position: absolute;
            right: -90px;
            display: inline-block;
            width: 80px;
            height: 30px;
        " id="close">關閉</a>
        <iframe src="" frameborder="0" id="pdfContainer" name="pdfContainer"></iframe>
    </div>
</body>
</html>

項目架構：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 pdf.js 使用實例 pdf.js插件的使用 pdf.js使用教程 pdf.js插件的使用 pdf.js使用詳解 pdf.js 使用教程 pdf.js使用問題 PDF預覽插件pdf.js的使用使用PDF.JS在線查看PDF pdf.js 使用實例（app直接預覽pdf格式的文檔）