angular2/angular4 如何通過$http的post方法請求下載二進位的Excel檔案

標籤：return   map   .net   alt   分類   one   json   object   environ   

時間有限,廢話就不多說了,直接上乾貨!

下面給大家介紹一下我遇到的一個坑,如果你也遇到了,那恭喜你,你一定能找到答案:angular2/angular4 如何通過$http的post方法請求下載二進位的Excel檔案? (angular1自行百度)

問題描述:

後台返回的是一個二進位的Excel流,要求標頭如下:

Access-Control-Allow-Origin:*Cache-Control:privateContent-Disposition:attachment;filename=%E9%A9%BE%E9%A9%B6%E5%91%98%E8%AF%84%E5%88%86.xlsxContent-Type:application/vnd.ms-excel; charset=UTF-8Date:Thu, 15 Jun 2017 03:19:11 GMTServer:Microsoft-IIS/8.5Transfer-Encoding:chunkedX-AspNet-Version:4.0.30319X-Powered-By:ASP.NET

給的請求方式是post,然後帶一堆的參數,現在求如何請求?

當時覺得後台應該是返回的是一個Excel檔案下載的地址,於是按照正常的請求發起請求,結果是然並卵,報錯了,返回資料如下:

返回結果是一個二進位流,還會有一個請求失敗的提示

排除後端問題,那前端應該怎麼請求呢?

當時想到的第一種方式是修改回應標頭:

Content-Type:application/vnd.ms-excel; charset=UTF-8

 

原來的回應標頭是Content-Type: application/json,改成xsl對應的二進位回應標頭應該就沒錯了吧,結果依然是然並卵,直接給我報500錯誤

於是乎,決定Google之,百度之,發現處理這種辦法的大多數是這樣的:

$http({    url: ‘your/webservice‘,    method: "POST",    data: json, //this is your json data string    headers: {       ‘Content-type‘: ‘application/json‘    },    responseType: ‘arraybuffer‘}).success(function (data, status, headers, config) {    var blob = new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});    var objectUrl = URL.createObjectURL(blob);    window.open(objectUrl);}).error(function (data, status, headers, config) {    //upload failed});

 

基本上大部分方法跟上面的大同小異,於是按著這個方法試了試,其中的重點配置是 responseType: ‘arraybuffer‘, 因為angular的http模組裡面有對responseType有定義:

responseType: ResponseContentType | null;

找到ResponseContentType:

 

export declare enum ResponseContentType {    Text = 0,    Json = 1,    ArrayBuffer = 2,    Blob = 3,}

原來它還有這幾個參數,那ArrayBuffer 對應就是responseType: 2, 依然是沒有用,結果跟直接用post請求一樣

如果你也經曆了這些,往下看吧!

這是我在想,ResponseContentType 裡面的其他的屬性都是幹嘛的, 前面2個很好理解,一個是文字格式設定的, 一個是json格式的,那ArrayBuffer和Blob是什麼意思呢?我只是簡單的將一下,想深入瞭解,可以看看張鑫旭的 理解DOMString、Document、FormData、Blob、File、ArrayBuffer資料類型

ArrayBuffer表示位元據的原始緩衝區，該緩衝區用於儲存各種類型化數組的資料,ArrayBuffer是位元據通用的固定長度容器。

Blob表示二進位大對象,專門存放位元據。

額，聽不懂？可以這麼理解，ArrayBuffer就是作為資料來源提前寫入在記憶體中，就是提前釘死在某個地區，長度也固定，萬年不變，Blob是個更高一級的大分類，包含ArrayBuffer，還有更多；

還有一種理解就是XMLHttpRequest 第二版允許伺服器返回位元據，這時分成兩種情況。如果明確知道返回的位元據類型，可以把傳回型別（responseType）設為arraybuffer；如果不知道，就設為blob。

反正不管怎麼樣吧，試一試blob，於是就有我最終的代碼:

download(url?:string, form?:any){    this.downloadHeader();     return this.http.post(url, form, this.options).map(res => res.json()).catch(this.handleError);  }  downloadHeader(){    if (localStorage.getItem(environment.local_storage_account)) {      this.headers = new Headers({‘token‘: JSON.parse(localStorage.getItem(environment.local_storage_account)).Token });      this.options = new RequestOptions({ headers: this.headers, responseType: 3 });    }  }

每個人的代碼寫法不一樣,請忽略其他的,只關注responseType: 3

最後返回的response是:

Blob {size: 4384, type: "application/vnd.ms-excel"}

那就可以用大家常用的blob方法來下載了:

var blob = new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});var objectUrl = URL.createObjectURL(blob);window.open(objectUrl);

這裡有一個問題,就是很多瀏覽器可能會牆掉彈窗,導致你的檔案沒法正常下載,所以我們用a標籤的形式來下載,思路就是成功後建立一個帶的a標籤,然後被動觸發點擊:

var blob = new Blob([res], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});  var objectUrl = URL.createObjectURL(blob);  var a = document.createElement(‘a‘);document.body.appendChild(a);a.setAttribute(‘style‘, ‘display:none‘);a.setAttribute(‘href‘, objectUrl);a.setAttribute(‘download‘, fileName);a.click();URL.revokeObjectURL(objectUrl); 

結束後釋放url,好了,大概的思路就是這樣了,如果你還有什麼不明白的,歡迎給我留言,我會儘快給你回複!

原創不易,如需轉載,請註明出處,謝謝!

 

angular2/angular4 如何通過$http的post方法請求下載二進位的Excel檔案