pdf.js插件使用教程 pdf文档在线浏览功能 demo案例

一开始想实现一个pdf在线预览的功能,现在web前端中文站将其中涉及的到关键技术共享给大家。

更多精彩内容请看web前端中文站
www.lisa33xiaoq.net 可按Ctrl + D 进行收藏

pdf.js 插件介绍

pdf.js可以实现在html下直接浏览pdf文档,是一款开源的pdf文档读取解析插件。官方地址:http://mozilla.github.io/pdf.js/

pdf.js主要包含两个库文件,一个pdf.js和一个pdf.worker.js,一个负责API解析,一个负责核心解析。

pdf.js可通过pdf文件的地址或pdf数据流获取pdf,具体实现是调用接口函数 PDFJs.getDocument(url/buffer)将pdf载入html,通过canvas处理, 然后渲染pdf文件。在实际项目中,是需要从资源服务器上取到pdf的下载地址,然后在微信端进行在线浏览。当时考虑了两种方法解决,一是将pdf转成图片;二是将pdf转换成数据流,因为转换成流的话可以解决pdf.js的跨域问题。我采取了第二种方式,因为第一种方式的效率并不好,转换的图片会带有官方的水印,而且有的部分会识别不了。

以下是 pdf.js 结构图原理

pdf.js 插件结构图

pdf.js 插件结构图

首先我们需要将 pdf.js 从官网上下载下来。然后项目,在项目中放置一个待预览的pdf文档,同时将pdf.js 复制到项目中。新建一个index.html文件。内容如下:

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

项目结构如下图所示:

项目结构

项目结构

注意:无法阅读的情况按下图解决。1492504085_850201

 

 

 

 

1
如无特殊说明,文章均为原作者原创,转载请注明出处

该文章由 发布

这货来去如风,什么鬼都没留下!!!
发表我的评论

Hi,请填写昵称和邮箱!

取消评论
代码 贴图 加粗 链接 删除线 签到