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系统支持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("/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 - 简书