pdf.js远程跨域访问+访问文件流

pdf.js远程跨域访问&＃43;访问文件流

前言&＃xff1a;使用pdf.js之前首先得确定需要访问是的本项目PDF文件&＃xff0c;还是远程PDF文件还是PDF文件&＃xff0c;还是本地文件流&＃xff0c;还是远程PDF文件流。我这里使用的是远程文件流的路径&＃xff08;具我目前的理解&＃xff1a;文件流路径是可以直接访问下载的&＃xff09;。网上有很多教程&＃xff0c;要么只是讲pdf.js跨域访问&＃xff0c;要么就是pdf.js的文件流访问。所以会有有些人访问不到的情况。就因为我的是PDF文件流路径。这里就记录一下我遇到跨域访问文件流的过程。

1. 下载pdf.js 官网。这里就不多介绍&＃xff0c;网上很多有关结构目录的介绍。可以查看有关资料。
2. 将下载的文件夹整个拷贝到项目中&＃xff08;我这里使用的是目前最新的pdfjs-2.5.207-dist&＃xff09;。这属于前端页面&＃xff0c;只要拷贝到能访问页面的地方就可以了。如下图&＃xff1a;
   
3. 这里需要处理两个问题&＃xff1a;跨域和访问文件流。

对于本项目中的PDF文件来说&＃xff0c;访问很简单&＃xff1a;如下代码&＃xff1a;


<a href&＃61;&＃39;../js/pdfjs-2.5.207-dist/web/viewer.html?file&＃61;PDF文件&＃39;>点击预览a>


对于远程PDF文件的处理&＃xff1a;首先需要修改两个文件的内容&＃xff0c;viewer.html和viewer.js。

• 先说viewer.js文件&＃xff0c;文件代码较多&＃xff0c;建议使用搜索的方式&＃xff1a;
  找到以下代码&＃xff1a;

function webViewerLoad() {var config &＃61; getViewerConfiguration();window.PDFViewerApplication &＃61; pdfjsWebApp.PDFViewerApplication;window.PDFViewerApplicationOptions &＃61; pdfjsWebAppOptions.AppOptions;var event &＃61; document.createEvent(&＃39;CustomEvent&＃39;);event.initCustomEvent(&＃39;webviewerloaded&＃39;, true, true, {});document.dispatchEvent(event);pdfjsWebApp.PDFViewerApplication.run(config);
}


修改代码如下&＃xff0c;可以将上面的代码注释掉&＃xff0c;加入下面代码&＃xff0c;我就是这样做的&＃xff1a;

window.webViewerLoad&＃61;function webViewerLoad(fileUrl) {//调整了此行var config &＃61; getViewerConfiguration();window.PDFViewerApplication &＃61; pdfjsWebApp.PDFViewerApplication;window.PDFViewerApplicationOptions &＃61; pdfjsWebAppOptions.AppOptions;var event &＃61; document.createEvent(&＃39;CustomEvent&＃39;);event.initCustomEvent(&＃39;webviewerloaded&＃39;, true, true, {});document.dispatchEvent(event);//调整了if 语句if(fileUrl){config.defaultUrl&＃61;fileUrl;}pdfjsWebApp.PDFViewerApplication.run(config);
}


• 注释掉以下代码&＃xff0c;这段代码就在上面代码之下呢&＃xff1a;

if (document.readyState &＃61;&＃61;&＃61; &＃39;interactive&＃39; || document.readyState &＃61;&＃61;&＃61; &＃39;complete&＃39;) {webViewerLoad();
} else {document.addEventListener(&＃39;DOMContentLoaded&＃39;, webViewerLoad, true);
}


• 找到如下代码&＃xff1a;

run: function run(config) {this.initialize(config).then(webViewerInitialized);}//我的文件中不是这样的&＃xff0c;是下面代码&＃xff0c;两者是一样的
run(config) {this.initialize(config).then(webViewerInitialized);
},


修改代码如下&＃xff1a;

run: function run(config) {//添加if语句if(config.defaultUrl){_app_options.AppOptions.set(&＃39;defaultUrl&＃39;,config.defaultUrl)} this.initialize(config).then(webViewerInitialized);
},
//我的修改是如下&＃xff0c;其实一样
run(config) {//添加if语句if(config.defaultUrl){_app_options.AppOptions.set(&＃39;defaultUrl&＃39;,config.defaultUrl)}this.initialize(config).then(webViewerInitialized);},


• 接下来是viewer.html文件了&＃xff0c;修改之前一定要引入jquery文件&＃xff0c;因为这里需要用到ajax请求&＃xff0c;解决跨域问题。以下加入的代码不需要更改&＃xff0c;便可直接使用。

<script type&＃61;"text/Javascript">$(()&＃61;>{//获取要跨域访问的pdf地址var url &＃61; getUrlParam("urlPath");console.log(url)xhrPdf(url,function(href){//调用viewer.js方法预览pdfwebViewerLoad(href)})})//获取url中的参数function getUrlParam(name) {var reg &＃61; new RegExp("(^|&)" &＃43; name &＃43; "&＃61;([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象var r &＃61; window.location.search.substr(1).match(reg); //匹配目标参数if (r !&＃61; null) return unescape(r[2]); return null; //返回参数值}//添加xhrPdf函数function xhrPdf(urlPath,callback) {$.ajax({type: "post",async: false,mimeType: &＃39;text/plain; charset&＃61;x-user-defined&＃39;,url: "/WechatApp/manual/pdfStreamHandler", //请求服务器数据 获取pdf数据流,data:{urlPath:urlPath},success: function(data) {var rawLength &＃61; data.length;//转换成pdf.js能直接解析的Uint8Array类型,见pdf.js-4068var array &＃61; new Uint8Array(new ArrayBuffer(rawLength));for (var i &＃61; 0;i < rawLength; i&＃43;&＃43;) {array[i] &＃61; data.charCodeAt(i) & 0xff;}var href &＃61; window.URL.createObjectURL(new Blob([array]));//数据流转换成createObjectURL能解析的Blob类型callback(href) //返回url}});}script>


• 这里并没有真正解决跨域问题&＃xff0c;通过间接转换的方式解决的。主要是通过调用后端mapping&＃xff0c;将PDF文件转为PDF文件流来操作的&＃xff0c;这个网上教程到处都是。但是如果已经知道的路径就是PDF文件流了怎么办&＃xff1f;这里就需要在后端controller中创建一个请求&＃xff0c;作相应的处理&＃xff0c;然后把流数据传到前端&＃xff0c;这样前端就可以访问了PDF文件了。
  我这里处理如下&＃xff1a;创建如下mapping

&＃64;RequestMapping(value &＃61; "/pdfStreamHandler")public void getRemoteFile(String urlPath, HttpServletResponse response) {InputStream inputStream &＃61; null;try {try {String strUrl &＃61; urlPath.trim();URL url &＃61; new URL(strUrl);//打开请求连接URLConnection connection &＃61; url.openConnection();HttpURLConnection httpURLConnection &＃61; (HttpURLConnection) connection;httpURLConnection.setRequestProperty("User-Agent", "Mozilla/4.0 (compatible; MSIE 5.0; Windows NT; DigExt)");// 取得输入流&＃xff0c;并使用Reader读取inputStream &＃61; httpURLConnection.getInputStream();/*** 以上的操作处理是处理文件流的&＃xff0c;如果访问的是远程PDF文件* 可以直接new File&＃xff08;"文件路径"&＃xff09;&＃xff0c;然后传给inputStream,* 然后以下操作不变。*/int bytesum &＃61; 0;int byteread &＃61; 0;byte[] buffer &＃61; new byte[1024];// 清空responseresponse.reset();// 设置response的Headerresponse.addHeader("Content-Disposition", "attachment;filename&＃61;" &＃43; new String("cbzm.pdf".getBytes()));OutputStream toClient &＃61; new BufferedOutputStream(response.getOutputStream());response.setContentType("application/octet-stream");bytesum &＃61; 0;byteread &＃61; 0;buffer &＃61; new byte[1024];while ((byteread &＃61; inputStream.read(buffer)) !&＃61; -1) {bytesum &＃43;&＃61; byteread;toClient.write(buffer, 0, byteread);}toClient.flush();inputStream.close();toClient.close();} catch (IOException e) {e.printStackTrace();inputStream &＃61; null;}} catch (Exception e) {e.printStackTrace();inputStream &＃61; null;}}


• 调用方法如下&＃xff1a;



<a href&＃61;&＃39;../js/pdfjs-2.5.207-dist/web/viewer.html?urlPath&＃61;PDF路径即可&＃39;>点击预览a>


• 参考文章&＃xff1a;
• https://blog.csdn.net/wf001015/article/details/93307643?utm_medium&＃61;distribute.pc_relevant.none-task-blog-baidulandingword-2&spm&＃61;1001.2101.3001.4242
• https://blog.csdn.net/baby97/article/details/83410628
• https://www.cnblogs.com/best-coder/p/11550409.html