天天看點

前後端分離,導出資料為檔案或下載下傳檔案,前端如何處理後端傳回的資料

  在前後端分離的項目中涉及跨域問題,通常都會使用token進行驗證。

  最近在前後端分離的項目中在一個問題上搞了很久,就是以前下載下傳附件或者導出資料為檔案的時候,在以前的那些項目前端可以直接用 window.location.href='後端url',window.open(url)或者其他的方式,但是在前後端分離中這種方式不能把token也一起傳到後端進行請求,導緻權限不夠通路不了後端。

  最後在多方面的嘗試下,也和同僚一起讨論,最後這麼解決(直接附代碼):

1  /**
 2      * 導出使用者清單
 3      */
 4     private exportUsers(){
 5         this.http.doPost({
 6             url: 'system/sysmanager/user/exportUsers', 
 7             responseType:ResponseContentType.Blob,  
 8             body:this.form,  //傳入後端的表單資料
 9             success: (req, res) => {
10                 var blob = new Blob([res.json()]); //建立一個blob對象
11                 var a = document.createElement('a'); //建立一個<a></a>标簽
12                 a.href = URL.createObjectURL(blob); // response is a blob
13                 a.download = "使用者清單.xlsx";  //檔案名稱
14                 a.style.display = 'none';
15                 document.body.appendChild(a);
16                 a.click();
17                 a.remove();
18             }
19         });
20    }      

開始以為後端代碼需要更改,其實後端代碼不需要更改,輸出的是輸出流、或者位元組數組前端都可以進行轉換。

這個部落格有點簡短,如果有什麼意見或者問題歡迎大家指教。

繼續閱讀