pdf.js开发经验

来源：互联网发布：linux samba用户权限编辑：程序博客网时间：2024/06/08 08:42

在接触到一个需要支持在线阅读*.pdf文件的项目，查了一些资料，有不少JQuery插件可以支持在线阅读，但IE的默认情况下是需要下载后在本地观看的，为了支持IE故选择了pdf.js采用html5来实现在线阅读，不过因为是需要html5的支持，所以ie低版本不支持html5。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE HTML ><html><head><%@include file="/WEB-INF/jsp/inc/reception.jsp" %><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><style>body{padding-top: 50px;text-align:center;}.operate{margin: 10px;}#info{margin:10px;color:red;}</style></head><body>  <div class="operate" >    <button id="prev" onClick="goPrevious()">上一页</button>    <button id="next" onClick="goNext()">下一页</button>       <span>当前: <span id="page_num"></span> / <span id="page_count"></span></span>  </div>  <div>    <canvas id="the-canvas" style="border:1px solid black"></canvas>    <div id="info" >正在加载，请稍候...</div>  </div>  <div class="operate" >    <button id="prev" onClick="goPrevious()">上一页</button>    <button id="next" onClick="goNext()">下一页</button>       <span>当前: <span id="pageNum"></span> / <span id="pageCount"></span></span>  </div>  <input type="hidden" id="pdfUrl" value="../file/text/${article.bookPath}" /></body><!-- 让不支持HTML5的浏览器支持HTML5 --><script src="pdf/js/html5.js" type="text/javascript" charset="UTF-8"></script><!-- 因为pdf.js需要支持canvas属性，导入该文件为了让不支持canvas属性的浏览器也可以支持 --><script src="pdf/js/excanvas.compiled.js" type="text/javascript" charset="UTF-8"></script><script type="text/javascript" src="pdf/js/pdf.js"></script>  <script type="text/javascript">    //隐藏域存有pdf的所在路径，动态读取pdf    var url = $("#pdfUrl").val();    PDFJS.disableWorker = true;    var pdfDoc = null,        pageNum = 1,        scale = 1.7,        canvas = document.getElementById('the-canvas'),        ctx = canvas.getContext('2d');    function renderPage(num) {      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        };        page.render(renderContext);//pdf加载完毕后，页面提示信息淡出        $("#info").fadeOut(3000);      });//为了方便，在页面的顶部和底部都加上了翻页按钮      document.getElementById('page_num').textContent = pageNum;      document.getElementById('page_count').textContent = pdfDoc.numPages;      document.getElementById('pageNum').textContent = pageNum;      document.getElementById('pageCount').textContent = pdfDoc.numPages;    }    function goPrevious() {      if (pageNum <= 1)        return;      pageNum--;      renderPage(pageNum);    }    function goNext() {      if (pageNum >= pdfDoc.numPages)        return;      pageNum++;      renderPage(pageNum);    }    PDFJS.getDocument(url).then(function getPdfHelloWorld(_pdfDoc) {      pdfDoc = _pdfDoc;      renderPage(pageNum);    });  </script> </html>

在这里需要提到的是swftool+flexpaper这两个插件也可以实现在线阅读pdf，只不过在读取文件之前使用swftool转换成*.swf文件，再用flexpaper播放转换后的*.swf文件。不过，这样转换后载入很慢，Of course，在使用这两个插件的时候也可以在上传文件的时候就直接把pdf转换成swf，之前也有类似经验，觉得不是很方便。所以弃之不用。
只是一个很简单的demo，如有处理不妥之处，还请大神赐教，表示感谢。新手可借鉴，如有新发现，欢迎交流

0 0