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請求握手一次的方式實現跨根域傳送請求,需要服務端配置