1. 程式人生 > >pdf.js跨域解決方法——遠端載入pdf

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的分享

相關推薦

pdf.js解決方法——遠端載入pdf

思路:通過將需要瀏覽的pdf通過後臺轉為檔案流傳給前端,來解決跨域問題。js程式碼寫在viewer.html裡,放到引用pdf.js的位置前面js程式碼,來接收檔案流:<script> var PDFData = ""; $.ajax({

使用 pdf.js 問題的處理方法1

在《使用 pdf.js 在網頁中載入 pdf 檔案》中詳細介紹了 pdf.js 的使用與整合網頁開發的基本方法。展示效果如下圖: 站點的目錄為 http://localhost:8033/PDFTest。此時PDF檔案就部署在IIS站點的子目錄下,這種方式訪問一切正常。 var pdfF

withCredentials--相同主解決方法

rip bsp keyword 不同 plain script mode nbsp 主域 主域相同,而子域不同,存在跨域問題。在高版本瀏覽器下,可以設置withCredentials來解決。   xhrFields: {withCredentials: true}   低版

vue解決方法 及設置api路徑方法

fun tab cti query 跨域請求 geo var nco target vue項目中,前端與後臺進行數據請求或者提交的時候,如果後臺沒有設置跨域,前端本地調試代碼的時候就會報“No ‘Access-Control-Allow-Origin‘ header is

請求解決方法CORS

status 跨域 以及 methods 當前頁 function sin style 配置 CORS全稱Cross-Origin Resource Sharing,是HTML5規範定義的如何跨域訪問資源。 Origin表示本域,也就是瀏覽器當前頁面的域。當JavaScr

[]解決方法之Ngnix反向代理

方式 lose ted request get OS href with 解決方法 跨域原理:http://www.cnblogs.com/Alear/p/8758331.html 介紹Ngnix之前,我麽先來介紹下代理是什麽~   代理相當於中間人,中介的概念   代

[整理]JavaScript解決方法大全

跨域的定義:Javascript出於安全性考慮,同源策略機制對跨域訪問做了限制。域僅僅是通過“URL的首部”字串進行識別,“URL的首部”指window.location.protocol +window.location.host,也可以理解為“Domains, protocols and por

前端JS解決方案

JS跨域請求 這裡說的js跨域是指通過js在不同的域之間進行資料傳輸或通訊,比如用ajax向一個不同的域請求資料,或者通過js獲取頁面中不同域的框架中(iframe)的資料。只要協議、域名、埠有任何一個不同,都被當作是不同的域 跨域解決方案 CORS方案 COR

關於 webpy 解決方法的一點總結

python3.6.1程式碼如下: 服務程式碼: ''' 此程式碼實現了: arcgis api for js 3.25 服務的本地化。 此程式碼 + arcgis_js_v325_sdk 資料夾 是一套。 arcgis api for js 的其他版本,也一樣。 啟動程式碼: py

什麼是解決方法

一、為什麼會出現跨域問題 出於瀏覽器的同源策略限制。同源策略(Sameoriginpolicy)是一種約定,它是瀏覽器最核心也最基本的安全功能,如果缺少了同源策略,則瀏覽器的正常功能可能都會受到影響。可以說Web是構建在同源策略基礎之上的,瀏覽器只是針對同源策略的一種實現。同源策略會阻止一個域的

js方法

這裡說的js跨域是指通過js在不同的域之間進行資料傳輸或通訊,比如用ajax向一個不同的域請求資料,或者通過js獲取頁面中不同域的框架中(iframe)的資料。只要協議、域名、埠有任何一個不同,都被當作是不同的域。 下表給出了相對http://store.company.com/dir/page.html同

前端常見解決方法

什麼是跨域? 跨域是指一個域下的文件或指令碼試圖去請求另一個域下的資源,這裡跨域是廣義的。 廣義的跨域: 資源跳轉: A連結、重定向、表單提交 資源嵌入: <link>、<script>、<img>、<fram

前端解決方法總結

同源策略: 所謂同源策略,指的是瀏覽器對不同源的指令碼或者文字的訪問方式進行的限制。 同源:協議相同,域名相同,埠相同。 同源策略主要帶來三個方面的行為限制: 1、cookie,localstorage和IndexDB無法讀取 2、DOM無法獲取 3

cookie 解決方法

16px 客戶端 正向 域名服務 host bubuko 解決方法 set info 1、Nginx 正向和反向代理的區別 正向代理和反向代理的區別:正向代理隱藏真實客戶端,反向代理隱藏真實服務端,圖示: 2、cookie跨域問題 因為cookie存在跨域問題,其

vue.js 解決方法(轉載)

vue專案中,前端與後臺進行資料請求或者提交的時候,如果後臺沒有設定跨域,前端本地除錯程式碼的時候就會報“No 'Access-Control-Allow-Origin' header is present on the requested resource.” 這種跨域錯誤。 要想本地正常的除錯,解決

JS(ajax、iframe解決方法及原理詳解

js跨域是指通過js在不同的域之間進行資料傳輸或通訊,比如用ajax向一個不同的域請求資料,或者通過js獲取頁面中不同域的框架中(iframe)的資料。只要協議、域名、埠有任何一個不同,都被當作是不同的域。 要解決跨域的問題,我們可以使用以下幾種方法: 1、

JS(ajax、iframe解決方法及原理詳解(jsonp)

這裡說的js跨域是指通過js在不同的域之間進行資料傳輸或通訊,比如用ajax向一個不同的域請求資料,或者通過js獲取頁面中不同域的框架中(iframe)的資料。只要協議、域名、埠有任何一個不同,都被當作是不同的域。 下表給出了相對http://store.company.com/dir/page.htm

解決ajax方法原理詳解之Cors方法

詳細 不同 htm 渲染 jsonp del 需要 methods href 1、神馬是跨域(Cross Domain) 對於端口和協議的不同,只能通過後臺來解決。 一句話:同一個ip、同一個網絡協議、同一個端口,三者都滿足就是同一個域,否則就是 跨域問題了。而為

瀏覽器同源政策及其規避方法,解決

瀏覽器安全的基石是”同源政策”(same-origin policy)。很多開發者都知道這一點,但瞭解得不全面。   本文詳細介紹”同源政策”的各個方面,以及如何規避它。   一、概述   1.1 含義   1995年,同

java服務端解決js的問題 CORS(資源共享) 的配置

nginx相容跨域上傳 相容情況: 各種新版本的ie10,firefox,opera,safari,chrome以及移動版safari和Android瀏覽器 ie9及一下版本請使用flash方式來相容 通過OPTIONS請求握手一次的方式實現跨根域傳送請求,需要服務端配置