在线预览pdf文件（pdf.js）

JS实现

前言

​ 后台调用第三方接口，返回流，前端在线预览pdf文件。

实现

下载pdf

官方下载地址： http://mozilla.github.io/pdf.js/getting_started/#download/. 下载Stable稳定版本，解压并放入项目中。

引用

在页面中引入pdf.js

<script type="text/javascript" src="/static/assets/libs/pdfjs-2.4.456-dist/build/pdf.js"></script>

调用

layer.open打开弹出框调用 previewPdf:function (md5sum) { var accessToken = window.sessionStorage.getItem("accessToken"); if(accessToken =="" || accessToken == null){ getToken(); } var url = "/yw/qzzqnd/preview?md5sum="+md5sum+"&view="+pagedata.view+"&accessToken="+accessToken; layer.open({ type: 2, //类型，解析url closeBtn: 1, //关闭按钮是否显示 1显示0不显 maxmin:true,//最大最小化 默认false shadeClose: true, //点击遮罩区域是否关闭页面 shade: 0.8, //遮罩透明度 area: ['1000px', '600px'], //弹出层页面比例 content: "/static/assets/libs/pdfjs-2.4.456-dist/web/viewer.html?file="+encodeURIComponent(url), yes:function(index,layero){ //该回调携带两个参数，分别为当前层索引、当前层DOM对象 layer.close(index); //如果设定了yes回调，需进行手工关闭 } }); } 直接调用 var url = "/yw/qzzqnd/preview?md5sum="+md5sum+"&view="+pagedata.view+"&accessToken="+accessToken; window.open("/static/assets/libs/pdfjs-2.4.456-dist/web/viewer.html?file="+encodeURIComponent(url));

注意：地址需使用 encodeURIComponent() 方法把某些字符将被十六进制的转义序列进行替换 encodeURIComponent()API: https://www.w3school.com.cn/js/jsref_encodeURIComponent.asp

效果