pdf.js开发经验
2014-02-21 17:00
435 查看
在接触到一个需要支持在线阅读*.pdf文件的项目,查了一些资料,有不少JQuery插件可以支持在线阅读,但IE的默认情况下是需要下载后在本地观看的,为了支持IE故选择了pdf.js采用html5来实现在线阅读,不过因为是需要html5的支持,所以ie低版本不支持html5。
在这里需要提到的是swftool+flexpaper这两个插件也可以实现在线阅读pdf,只不过在读取文件之前使用swftool转换成*.swf文件,再用flexpaper播放转换后的*.swf文件。不过,这样转换后载入很慢,Of course,在使用这两个插件的时候也可以在上传文件的时候就直接把pdf转换成swf,之前也有类似经验,觉得不是很方便。所以弃之不用。
只是一个很简单的demo,如有处理不妥之处,还请大神赐教,表示感谢。新手可借鉴,如有新发现,欢迎交流
<%@ 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,如有处理不妥之处,还请大神赐教,表示感谢。新手可借鉴,如有新发现,欢迎交流
相关文章推荐
- C#按需序列化对象为Json字符串
- 深度解析JSP工作原理
- .net中解析json 之 DataContractJsonSerializer类
- js(引用类型和setTimeout scope)
- jsoneditor显示Json data
- 写在body的js跟写在head的区别
- stringByEvaluatingJavaScriptFromString的使用方法
- NDK报错:make: *** 没有规则可以创建“obj/local/armeabi/objs/a/a.o”需要的目标“/a.c”。 停止。
- 【翻译】在Ext JS中创建特定主题的重写
- 【翻译】在Ext JS中创建特定主题的重写
- 【翻译】在Ext JS中创建特定主题的重写
- 【翻译】在Ext JS中创建特定主题的重写
- js日志 javascript日志
- 关于js中断ajax请求
- Dijstra
- ExtJs表单验证的方法总结
- console.table()调试javascript
- js一百零一夜之第十一夜-javascript 的构造函数继承
- js一百零一夜之第十夜-javascript 的非构造函数继承
- Ajax基础学习笔记一