pdf.js跨域解决方法—

思路：通过将需要浏览的pdf通过后台转为文件流传给前端，来解决跨域问题。

js代码写在viewer.html里，放到引用pdf.js的位置前面

js代码,来接收文件流：

<script>var PDFData = "";$.ajax({type:"get",crossDomain:true,async:false, // false是不采用异步的方式mimeType:'text/plain;charset=x-user-defined',url:"http://localhost:8080/Convert?type=getPdf",success:function (data) {PDFData = data; // data是byte[]数组}});var rawLength = PDFData.length;// 转换成pdf.js能直接解析的Uint8Array类型，见pdf.js-4068var array = new Uint8Array(new ArrayBuffer(rawLength));for(var i = 0;i<rawLength;i++){array[i] = PDFData.charCodeAt(i)&0xff;}var pdf_url = array;</script>

后台，我写通过java了一个servlet来把文件转成文件流：

package main;import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.BufferedInputStream;
import java.io.IOException;
import java.net.HttpURLConnection;
import java.net.URL;@WebServlet(name = "Convert")
public class Convert extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request,response);}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setContentType("application/pdf");response.setHeader("Access-Control-Allow-Origin", "*"); // 解决请求头跨域问题ServletOutputStream sos = response.getOutputStream();String destUrl = "http://39.107.117.248/pdf-store/caseFile.pdf";URL url = new URL(destUrl);HttpURLConnection httpUrl = (HttpURLConnection)url.openConnection();// 连接指定的网络资源httpUrl.connect();// 获取网络输入流BufferedInputStream bis = new BufferedInputStream(httpUrl.getInputStream());int b;while ((b = bis.read())!= -1){sos.write(b);}sos.close(); // 这里有点和c语言里的读取文件有点像bis.close();}
}

参考链接：https://blog.csdn.net/anciend/article/details/80062213，感谢Anciend的分享

pdf.js跨域解决方法——远程加载pdf相关推荐

Js跨域解决方法总结
本文转载自网易博客出于安全性的考虑,在AJAX应用中,浏览器通常都会限制跨域提交数据.但由于经常和其他部门有接口对接的业务需求,需要跨域获取数据. IE对于跨域访问的处理是,弹出警告框,提醒用户.如 ...
JavaScript跨域解决方法大全
跨域的定义:JavaScript出于安全性考虑,同源策略机制对跨域访问做了限制.域仅仅是通过"URL的首部"字符串进行识别,"URL的首部"指window.lo ...
跨域解决方法——jsonp原理
跨域解决方法--jsonp原理一个域名地址的组成: 当协议.子域名.主域名.端口号任意一个不相同时,都算作不同域,不同域之间相互请求资源,就算做"跨域".由于浏览器同源策略的限制 ...
React项目中请求跨域解决方法
React项目中请求跨域解决方法今天经理给我了一个React项目地址,让我拉下来并跑起来,拉下来运行起来后,发现所有的请求都失败了,并且都是由于跨域问题导致的.花了点时间,解决了这个问题,在这里记录 ...
jquery、javascript实现(get、post两种方式)跨域解决方法
jquery.javascript实现(get.post两种方式)跨域解决方法一.实现get方式跨域请求数据浏览器端 <script> $(document).ready(fun ...
webpack：多文件、多环境、跨域处理、热加载
文章目录 webpack:多文件.多环境.跨域处理.热加载多页面处理 webpack多环境 vuecli多环境配置配置不同的打包命令定义变量跨域通过node模拟接口通过webpack解决跨 ...
5种处理js跨域问题方法汇总（转载）
1.JSONP跨域GET请求 ajax请求,dataType为jsonp.这种形式需要请求在服务端调整为返回callback([json-object])的形式.如果服务端返回的是普通json对象.那 ...
ASP.NET解决PDF.js跨域访问问题
PDF.js在访问pdf文件的时候,有时候会涉及到跨域问题,介绍一种.NET和PDF.js配合使用的方法. 前端代码: <script type="text/javascript&qu ...
frame页面地址转向跨域解决方法
mainFrame.htm下有两个iframe,左边是left.aspx,frame名是leftFrame,右边名是是mainFrame left.aspx包含了很多的连接,linka和linkc连到 ...

pdf.js跨域解决方法——远程加载pdf

pdf.js跨域解决方法——远程加载pdf相关推荐

最新文章

热门文章