PDF.js插件的使用--在线浏览PDF文件

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;
         }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值