使用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