PDF.JS-文件流方式在线展示pdf文件

tech2022-11-04  116

目前所在项目要求实现在线预览PDF功能,于是百度查了一些资料,借鉴了一些大佬好的想法,特总结下来,供参考。


PDFJS是在线预览PDF的一款神器,官网地址:http://mozilla.github.io/pdf.js/


下载后解压文件,直接拖进项目里就可以:



一些其博客说要把viewer.js里面的

  defaultUrl: {     value: "compressed.tracemonkey-pldi-09.pdf",     kind: OptionKind.VIEWER   }

该变量定义置空为:

  defaultUrl: {     value: "",     kind: OptionKind.VIEWER   }

这一步我没有操作最后也实现功能,所以可以操作可以不操作。


这个时候直接ip:端口+路径是能访问到pdf文件的。但是如果需要访问服务器文件的话,需要注意文件地址。

对于服务器文档流,网上网友的博客说的方法把拿到的文件流转化为url地址,然后我调用了后台的文件下载方法,并根据方法转换blob

但是最后出现的pdf,页码和后台实现的页数一样,但是每一页都是空白。所以这个方法以失败告终。

不转换直接文件流当作地址赋值过去的方法也未能实现。


后来在查找网友资料的时候,发现一个网友直接调用接口的方法,

该网友博客文章地址:https://blog.csdn.net/mufeng633/article/details/82983234?utm_source=app


于是尝试直接调用之前写好的下载文件的后台方法,(如果你的项目有下载文件的方法,可以尝试直接用接口+参数访问)

$scope.print = function () { var fileId="20190511001761600"; window.open('../Print/web/viewer.html?file=' +encodeURIComponent("/pmis-webteam/uploadFileDownload.do?id="+fileId)); }

此上方法测试可以用于Chrome、Edge 浏览器。


Safari 浏览器中没办法在回调函数里面执行window.open, 原因是safari的安全机制将其阻挡了”。

解决办法:在请求之前先打开一个空白窗口,在请求成功的回调函数里面:如果请求错误不需要开页,则将开的空白窗口关掉;否则修改当前打开空白窗口的location地址 。

$scope.print = function () { var param = { }; //获取当前操作系统参数 var _pf=navigator.platform; //var appVer=navigator.userAgent; if(_pf.indexOf("Win") > -1){//window系统支持chrome,Edge $remote.post("XXXXXXX.do", param, function (data) { var fileId=data.countMap.FilePath; window.open('../Print/web/viewer.html?file=' +encodeURIComponent("/pmis-webteam/sealFileDownload.do?id="+fileId)); }); }else if(_pf.indexOf("Mac") > -1){mac系统支持safari var winRef = window.open("","_blank");//先打开一个页面 $remote.post("XXXXXXX.do", param, function (data) { var fileId=data.countMap.FilePath; if(fileId){ winRef.location='../Print/web/viewer.html?file=' +encodeURIComponent("/pmis-webteam/sealFileDownload.do?id="+fileId); }else{ winRef.close(); } }); }else{ $remote.post("XXXXXXX.do", param, function (data) { var fileId=data.countMap.FilePath; window.open('../Print/web/viewer.html?file=' +encodeURIComponent("/pmis-webteam/sealFileDownload.do?id="+fileId)); }); } };

 XXXXXXX.do为后台生成pdf交易,生成交易返回data


到此:文档可以成功预览,本地和服务器部署都可以实现预览。

 

除了上面给出的一篇博客提示我尝试调用后台下载接口.

还有一篇博客大家可以看下:https://www.jianshu.com/p/242525315bf6

最新回复(0)