pdf.js跨域解決方法——遠程加載pdf

思路:通過將需要瀏覽的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-4068
      var 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的分享

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章