使用pdf.js在移动端预览pdf文档

pdf.js 是一个技术原型主要用于在 HTML5 平台上展示 PDF 文档，无需任何本地技术支持。

在线演示地址：http://mozilla.github.com/pdf.js/web/viewer.html

github:https://github.com/mozilla/pdf.js

PDF.js可在官网下载  地址：http://mozilla.github.io/pdf.js/

 

mozilla的pdf.js团队现在已经更新了用法，比起以前更方便了。

先下载压缩包，可以到上面的官网下载，也可以下这个 链接: https://pan.baidu.com/s/1lYyqpVoHQfNwgK_bUhQOeg 提取码: c562，最新版本到官网下。

解压后得到两个文件夹，然后直接传到你项目的服务器就行。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <iframe src="" id="pdf" frameborder="0"></iframe>

    <script>

        //预览页面的路径，就是解压PDF的压缩包后上传到服务器的路径
        var url = 'web/viewer.html'
        //pdf的路径
        var pdf_url = 'pdf.pdf'  
        //设置iframe的路径 #page=1 表示从第一页开始，路径没错就可以正常预览pdf了 
        var src = url+'?file='+pdf_url+'#page=1' 

        document.getElementById('pdf').src = src

    </script>
</body>
</html>

 

 

================================================分割线后面的不用看了==========================================================

解压后得到的build目录就是PDF.js的核心文件，直接引入里面的pdf.js文件就可以使用。

html 代码示例：

<div class="pdf-view">
    <h1>练习</h1>     

        <canvas id="the-canvas"></canvas>  
        
        <div class="page">  
            <button id="prev">上一页</button>  

            <span>页数: <span id="page_num"></span> / <span id="page_count"></span></span>  
            
            <button id="next">下一页</button>  
                
        </div>  

</div>

<script src="../../bulid/pdf.js"></script>  //引入pdf.js文件

pdf的预览就是通过上面的canvas展现出来的，一般移动端页面都将用户缩放禁止了，但如果在移动端页面上显示有点模糊的话，可以允许用户缩放，而宽高大小等样式根据项目要求调整吧。

JS代码示例：

var url = './练习.pdf';  //pdf文件的地址
  
        PDFJS.workerSrc = '../../build/pdf.worker.js';   //引入主要文件
            
        var pdfDoc = null,  
            pageNum = 1,  
            pageRendering = false,  
            pageNumPending = null,  
            scale = 0.8,  
            canvas = document.getElementById('the-canvas'),  
            ctx = canvas.getContext('2d');  
            
        function renderPage(num) {  
            pageRendering = true;  
            pdfDoc.getPage(num).then(function(page) {  
            var viewport = page.getViewport(scale);  
            canvas.height = viewport.height;  
            canvas.width = viewport.width;  
            
            var renderContext = {  
                canvasContext: ctx,  
                viewport: viewport  
            };  
            var renderTask = page.render(renderContext);  
            
            renderTask.promise.then(function() {  
                pageRendering = false;  
                if (pageNumPending !== null) {  
                // New page rendering is pending  
                renderPage(pageNumPending);  
                pageNumPending = null;  
                }  
            });  
            });  
            
            document.getElementById('page_num').textContent = pageNum;  
        }  
            
        function queueRenderPage(num) {  
            if (pageRendering) {  
            pageNumPending = num;  
            } else {  
            renderPage(num);  
            }  
        }  
            
        function onPrevPage() {  
            if (pageNum <= 1) {  
            return;  
            }  
            pageNum--;  
            queueRenderPage(pageNum);  
        }  
        document.getElementById('prev').addEventListener('click', onPrevPage);  
            
        function onNextPage() {  
            if (pageNum >= pdfDoc.numPages) {  
            return;  
            }  
            pageNum++;  
            queueRenderPage(pageNum);  
        }  
        document.getElementById('next').addEventListener('click', onNextPage);  
            
        PDFJS.getDocument(url).then(function(pdfDoc_) {  
            pdfDoc = pdfDoc_;  
            document.getElementById('page_count').textContent = pdfDoc.numPages;  
            
            renderPage(pageNum);  
        });

参考：http://blog.csdn.net/li_cheng_liang/article/details/75332938

posted @ 2018-03-05 17:35  哈哈敲敲  阅读(9641)  评论(2)  编辑  收藏  举报