時間有限,廢話就很少說了,直接上乾貨!前端
下面給你們介紹一下我遇到的一個坑,若是你也遇到了,那恭喜你,你必定能找到答案:angular2/angular4 如何經過$http的post方法請求下載二進制的Excel文件? (angular1自行百度)web
問題描述:json
後臺返回的是一個二進制的Excel流,請求頭以下:後端
Access-Control-Allow-Origin:* Cache-Control:private Content-Disposition:attachment;filename=%E9%A9%BE%E9%A9%B6%E5%91%98%E8%AF%84%E5%88%86.xlsx Content-Type:application/vnd.ms-excel; charset=UTF-8 Date:Thu, 15 Jun 2017 03:19:11 GMT Server:Microsoft-IIS/8.5 Transfer-Encoding:chunked X-AspNet-Version:4.0.30319 X-Powered-By:ASP.NET
給的請求方式是post,而後帶一堆的參數,如今求如何請求?數組
當時以爲後臺應該是返回的是一個Excel文件下載的地址,因而按照正常的請求發起請求,結果是然並卵,報錯了,返回數據以下:瀏覽器
返回結果是一個二進制流,還會有一個請求失敗的提示服務器
排除後端問題,那前端應該怎麼請求呢?angular2
當時想到的第一種方式是修改響應頭:app
Content-Type:application/vnd.ms-excel; charset=UTF-8
原來的響應頭是Content-Type: application/json,改爲xsl對應的二進制響應頭應該就沒錯了吧,結果依然是然並卵,直接給我報500錯誤
dom
因而乎,決定谷歌之,百度之,發現處理這種辦法的大多數是這樣的:
$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,好了,大概的思路就是這樣了,若是你還有什麼不明白的,歡迎給我留言,我會盡快給你回覆!
原創不易,如需轉載,請註明出處,謝謝!