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

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

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

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

解压后得到的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

转载于:https://www.cnblogs.com/haqiao/p/8510269.html