PDF.js插件的使用--在线浏览PDF文件
来源:互联网 发布:黑客远控软件 编辑:程序博客网 时间:2024/05/16 12:49
pdf.js可以实现在html下直接浏览pdf文档,是一款开源的pdf文档读取解析插件
pdf.js主要包含两个库文件,一个pdf.js和一个pdf.worker.js,,一个负责API解析,一个负责核心解析。
源码:https://github.com/mozilla/pdf.js
pdf.js可通过pdf文件的地址或pdf数据流获取pdf,具体实现是调用接口函数 PDFJs.getDocument(url/buffer)将pdf载入html,通过canvas处理, 然后渲染pdf文件。在实际项目中,是需要从资源服务器上取到pdf的下载地址,然后在微信端进行在线浏览。当时考虑了两种方法解决,一是将pdf转成图片;二是将pdf转换成数据流,因为转换成流的话可以解决pdf.js的跨域问题。我采取了第二种方式,因为第一种方式的效率并不好,转换的图片会带有官方的水印,而且有的部分会识别不了。我是用ajax调用后台方法查询pdf的url地址,然后传递给另一个页面去掉后台方法进行编码。后台(java)是发pdf的数据流给前台,前台接收pdf的buffer,然后通过pdf.js来渲染。这里贴出前台进行渲染的代码。js代码function showPdf() {var container = document.getElementById("container"); container.style.display = "block"; var url = convertDataURIToBinary('${encodeBase64}');//encodeBase64是后台传递的base64编码的二进制字符串 PDFJS.workerSrc = 'js/pdf.worker.js'; PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) { var $pop = $('#pop'); var shownPageCount = pdf.numPages < 50 ? pdf.numPages : 50;//设置显示的编码 var getPageAndRender = function (pageNumber) { pdf.getPage(pageNumber).then(function getPageHelloWorld(page) { var scale = 2; var viewport = page.getViewport(scale); var $canvas = $('<canvas></canvas>').attr({ 'height': viewport.height, 'width': viewport.width }); $pop.append($canvas); page.render({ canvasContext: $canvas[0].getContext('2d'), viewport: viewport }); }); if (pageNumber < shownPageCount) { pageNumber++; getPageAndRender(pageNumber); } }; getPageAndRender(1); }); }function convertDataURIToBinary(dataURI) { //将encodeBase64解码
var raw = window.atob(dataURI);
var rawLength = raw.length;
//转换成pdf.js能直接解析的Uint8Array类型,见pdf.js-4068
var array = new Uint8Array(new ArrayBuffer(rawLength));
for(i = 0; i < rawLength; i++) {
array[i] = raw.charCodeAt(i);
}
return array;
}
阅读全文
2 0
- PDF.js插件的使用--在线浏览PDF文件
- pdf文件的在线浏览
- 在线浏览PDF文件的实用jquery插件推荐
- 【转】在线浏览PDF文件的实用jquery插件推荐
- 在线浏览PDF文件的实用jquery插件推荐
- 8个实现在线浏览PDF文件的实用js插件
- 在线浏览PDF文件
- 浏览器在线浏览PDF文件之pdf.js
- 在线浏览pdf文件实现
- 在线预览插件pdf.js使用记录
- 8个实现在线浏览PDF文件的实用jQuery插件
- 8个实现在线浏览PDF文件的实用jQuery插件
- Android使用js方案实现在线浏览pdf文档
- pdf.js使用(在线预览pdf文件)
- 使用pdf.js在线预览远程服务器上的pdf文件
- PDF文件在线预览之pdf.js
- 在线浏览PDF之PDF.JS (附demo)
- pdf.js 在线浏览pdf组件构建与安装注意事项
- 高级CSS filters
- 虚拟机下 linux 连接网络并设置固定ip
- MVP模型复杂视图的思考
- 从零开始的Spring Boot (一)
- 视频学习 ---------如何获取Mp4某个box下面的数据
- PDF.js插件的使用--在线浏览PDF文件
- 5分钟搞定android混淆
- Linux下MySQL表名不区分大小写的设置方法
- 第十三章:事件(内存和性能、模拟事件)
- show processlist命令
- 【电子产品】ThinkPad S5 Intel(R) Dual Band Wireless-AC 3165 网卡驱动莫名其妙挂掉
- 10年跳槽经验总结 高级人才不用找工作
- Strust2学习之Struts运行原理
- Java中数组复制的四种方法