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

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

PDFJS是在线预览PDF的一款神器，官网地址：PDF.js

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

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

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

该变量定义置空为：

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

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

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

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

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

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

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

该网友博客文章地址：PDF.JS 解决跨域, 传值，本地路径，IE兼容性 问题_沐风Cc的博客-CSDN博客_pdf.js兼容ie8

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

$scope.print = function () {var fileId="20190511001761600"; window.open('../Print/web/viewer.html?file=' +encodeURIComponent("/XX-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("/XX-webteam/XXDownload.do?id="+fileId));}); }else if(_pf.indexOf("Mac") > -1){mac系统支持safarivar 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("/XX-webteam/XXDownload.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("/XX-webteam/XXDownload.do?id="+fileId));});}};

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

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

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

还有一篇博客大家可以看下：后台返回文件流，前端实现预览pdf - 简书

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！