| 使用PDF.js实现前端和手机端网页预览PDF文件（可定制，支持本地文件、Base64编码和远程URL跨域方式） | 您所在的位置：网站首页 › 手机浏览器开启javascript支持 › 使用PDF.js实现前端和手机端网页预览PDF文件（可定制，支持本地文件、Base64编码和远程URL跨域方式） |
使用PDF.js实现前端和手机端网页预览PDF文件（可定制，支持本地文件、Base64编码和远程URL跨域方式）
|
1.插件下载地址：https://mozilla.github.io/pdf.js/ 下载后解压pdfjs-1.10.88-dist.zip文件后得到：
2.把pdfjs-1.10.88-dist放到项目静态资源中，在自己的页面中通过iframe链接到pdfjs-1.10.88-dist/web/viewer.html文件中。 3.访问自己的页面，默认就是本地文件的方式打开PDF文件，可自行指定viewer.js文件中 DEFAULT_URL的值为需要预览的文件路径，可以把下图的代码行注释掉，到viewer.html中嵌入标签在里面重新定义该变量为需要预览的本地文件。
4.Base64方式预览 （1）界面定制：默认的viewer.html页面功能太强大了，在手机端项目不需要，这里会提供快速的裁剪代码。 先给出效果图： （2）你需要copy的代码（完全不用修改，但是一定要把步骤3中的代码行注释掉！！） 在viewer.html文件中： 和之间插入下面的代码 function getBase64Data() { // 优先从Session中获取 let key = "_base64DataStr"; let result = sessionStorage.getItem(key); if (result) return result; return localStorage.getItem(key); // console.log(window.parent.name.length); // return window.parent.name; } // console.log(document.location.search); var BASE64_MARKER = ';base64,'; //声明文件流编码格式 var preFileId = ""; var pdfAsDataUri = getBase64Data(); //pdf文件的base64码，通过session/local传递base64 if (!pdfAsDataUri) { console.error("SessionStorage中没有_base64DataStr对象"); } // console.log(pdfAsDataUri); var pdfAsArray = convertDataURIToBinary(pdfAsDataUri); DEFAULT_URL = pdfAsArray; //编码转换 function convertDataURIToBinary(dataURI) { //[RFC2045]中有规定: Base64-行不能超过76字符，超过则添加回车换行符。因此需要把base64字段中的换行符，回车符给去掉。 var base64Index = (dataURI + '').indexOf(BASE64_MARKER) + BASE64_MARKER.length; var newUrl = dataURI; newUrl = dataURI.substring(base64Index).replace(/[\n\r]/g, ''); var raw = newUrl; try { raw = window.atob(newUrl); //这个方法在ie内核下无法正常解析。 } catch (e) { console.error(e); } var rawLength = raw.length; //转换成pdf.js能直接解析的Uint8Array类型 var array = new Uint8Array(new ArrayBuffer(rawLength)); for (i = 0; i < rawLength; i++) { array[i] = raw.charCodeAt(i) & 0xff; } return array; }（3）裁剪代码（直接copy即可） 不要试图去删掉viewer.html中多余功能的html元素，因为在js文件中会根据这些元素绑定功能！！ 在viewer.html中最下面的前添加如下代码： let ids = ["sidebarToggle", "toolbarButtonSpacer", "toolbarViewerRight"]; ids.forEach(value => { let dom = document.getElementById(value); if (dom) { dom.style.display = "none"; } }) let scales = document.getElementsByClassName("splitToolbarButton"); if (scales && scales.length >= 4) { scales[3].style.marginLeft = "-80px"; }（4）你需要准备的就是在预览前，往你的sessionStorage或者localStorage中存入PDF文件的base64编码，键为代码中的_base64DataStr，如：data:application/pdf;base64,JVBERi0xLjcKJcKzx9gNCjEgMCBvYmoNPDwv......
5.远程URL跨域方式 5.1 先说本地pdf文件访问的另一种比较方便的访问形式：url传参 假设你的插件存放在assets目录中，则也可通过url的方式浏览本地PDF文件（前面所有改动撤销，功能隐藏的裁剪代码随意） 支持相对路劲，如果路径有中文或特殊字符需要转码，推荐使用encodeURIComponent()方法。 iframe的src="assets/pdfjs-1.10.88-dist/web/viewer.html?file=compressed.tracemonkey-pldi-09.pdf" 不使用iframe方式也可以直接通过浏览器地址栏访问，前面带上域名，支持相对路径！！5.2 如果服务端支持访问pdf文件返回文件流的，上面的file参数可指向文件流接口，如： http://hocalhost:8100/assets/pdfjs-1.10.88-dist/web/viewer.html?file=encodeURIComponent(文件流接口访问URL) tip1：文件流是普通的输出流，并非文件的base64编码！！ tip2：如果viewer.html跟访问文件接口url不在同一个服务器上会出现跨域问题，按下图所示修改viewer.js来解决跨域问题（注释掉红色框部分的代码即可）：
END：陆陆续续参考了很多博客，就不一一列举了，Thanks a lot! |
【本文地址】