• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

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

JavaScript web前端中文站 2年前 (2018-04-28) 3155次浏览 已收录 0个评论

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

更多精彩内容请看 web 前端中文站
http://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 文档在线浏览功能 demo 案例

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

项目结构如下图所示:

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

项目结构

注意:无法阅读的情况按下图解决。pdf.js 插件使用教程  pdf 文档在线浏览功能 demo 案例

 

 

 

 


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:pdf.js 插件使用教程 pdf 文档在线浏览功能 demo 案例
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址