使用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中嵌入<script>标签在里面重新定义该变量为需要预览的本地文件。

4.Base64方式预览

（1）界面定制：默认的viewer.html页面功能太强大了，在手机端项目不需要，这里会提供快速的裁剪代码。

先给出效果图：

（2）你需要copy的代码（完全不用修改，但是一定要把步骤3中的代码行注释掉！！）

在viewer.html文件中：

<script src="../build/pdf.js"></script>和<script src="viewer.js"></script>之间插入下面的代码

<script src="../build/pdf.js"></script><script type="text/javascript">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传递base64if (!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;}</script><script src="viewer.js"></script>

（3）裁剪代码（直接copy即可）

不要试图去删掉viewer.html中多余功能的html元素，因为在js文件中会根据这些元素绑定功能！！

在viewer.html中最下面的</body>前添加如下代码：

<!--隐藏多余的交互元素-->
<script type="text/javascript">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";}
</script>

（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!

使用PDF.js实现前端和手机端网页预览PDF文件（可定制，支持本地文件、Base64编码和远程URL跨域方式）相关推荐

vue调用手机浏览器打开pdf_vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法...
目前大多数PC浏览器支持在线预览pdf文件,但大多数手机浏览器还未支持,尝试用手机浏览器打开一个pdf文件会弹出是否下载的提示框.网上查了一些资料,在实现的过程中,还是走了比较多的弯路,最后采用了备受 ...
charm浏览器下载网页预览PDF文件
进入网页开发者页面,寻找可直接下载的PDF源文件 (简单有效.无限制) 1.浏览器打开网页(建议用谷歌浏览器打开): 2.点击鼠标右键,选择[检查] ,或者按Crtl+shift+I快捷键: 3.进入 ...
PC端、手机端在线预览文档组件react-file-viewer与npm构建内存溢出
用户上传文件后,pc端可以下载文件,但是手机端下载文件就很不方便,手机的端需要直接将附件查看,所以需要 react-file-viewer 这个npm包可以根据自己本地开发环境npm的配置通过命令, ...
前端在旧版浏览器预览PDF文件
目录场景使用方法引入pdf.js 写法鸣谢场景旧版浏览器无法支持PDF文件在线预览,虽然有adobe reader这个软件可以支持iframe在线预览,但让每个使用旧版浏览器的用户去安装这 ...
不同手机型号图文预览_手机端图片预览查看
图片预览 /*正式样式 start*/.wrap{width:100%; }.head-box{height:40px;background:#4ecbf3;width:100%;text-align ...
怎么实现手机端网页页面自适应调整
今天分享下"怎么实现手机端网页页面自适应调整"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习一下 ...
手机端预览pdf的那些事
Hello,大家周末好,最近在写项目中遇到了手机端预览pdf的问题今天在这里给大家分享一下. 我遇到的问题分为2种:ios:X一下的机型使用window.open来在手机端打开不能滑动文件,X以上机型 ...
springboot vue 小程序小区物业管理系统【物业手机版（小程序）+物业系统后端+物业系统前端+业主手机端（小程序）】（功能较丰富）
springboot vue 小程序小区物业管理系统[物业手机版(小程序)+物业系统后端+物业系统前端+业主手机端(小程序)](功能较丰富) 高清视频演示: https://www.bilibili. ...
PDF.js + Vue 浏览器以只读方式打开PDF,后台返回文件流，前端实现预览pdf
如果你想光前端完成 office(xls,doc,ppt) 文件的预览,只能提供你这些库来使用 PDF http://mozilla.github.com/pdf.js/ XLS https://gi ...

使用PDF.js实现前端和手机端网页预览PDF文件（可定制，支持本地文件、Base64编码和远程URL跨域方式）

使用PDF.js实现前端和手机端网页预览PDF文件（可定制，支持本地文件、Base64编码和远程URL跨域方式）相关推荐

最新文章

热门文章