angular2/angular4 如何通過$http的post方法請求下載二進位的Excel文件
時間有限,廢話就不多說了,直接上乾貨!
下面給大家介紹一下我遇到的一個坑,如果你也遇到了,那恭喜你,你一定能找到答案:angular2/angular4 如何通過$http的post方法請求下載二進位的Excel文件? (angular1自行百度)
問題描述:
後台返回的是一個二進位的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文件下載的地址,於是按照正常的請求發起請求,結果是然並卵,報錯了,返回數據如下:
返回結果是一個二進位流,還會有一個請求失敗的提示
排除後端問題,那前端應該怎麼請求呢?
當時想到的第一種方式是修改響應頭:
Content-Type:application/vnd.ms-excel; charset=UTF-8
原來的響應頭是Content-Type: application/json,改成xsl對應的二進位響應頭應該就沒錯了吧,結果依然是然並卵,直接給我報500錯誤
於是乎,決定谷歌之,百度之,發現處理這種辦法的大多數是這樣的:
$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,好了,大概的思路就是這樣了,如果你還有什麼不明白的,歡迎給我留言,我會儘快給你回復!
※在windows下使用Qt5開發GTK3圖形界面應用程序
※帶著問題寫React Native原生控制項--Android視頻直播控制項
※html5中cookie介紹,封裝以及添加,獲取,刪除
※對於JSONObject,我只是臨時抱佛腳
※Java之戳中痛點-(7)善用Java整型緩存池
TAG:科技優家 |
※linux下如何使用docker二進位文件安裝
※走進位於加州的Yeezy工作室 | Mastermind JAPAN x Converse | ACG 2018SS造型示範
※Delphi TColor和16進位顏色的相互轉換
※人性化地處理二進位數據:Bitstream
※如何逆向分析WebAssembly二進位代碼
※LoadRunner生成二進位參數的方法
※Centos 7 二進位安裝配置 MariaDB資料庫
※谷歌發布 TensorFlow 1.6.0,針對 CUDA 9.0 和 cuDNN 7 預構建二進位文件
※谷歌發布 TensorFlow 1.6.0,針對 CUDA 9.0和cuDNN 7 預構建二進位文件
※Ubuntu要放棄32進位兼容支持造成跑不了WINE遊戲?
※谷歌推出 K8S 二進位授權、Turbonomic 擴展 K8S 管理範圍、數千商店將引入面部識別防止行竊
※Linux 上最好的十六進位編輯器
※使用IDAPython自動映射二進位文件替換默認函數名
※演繹inSite先進位造專場觀眾招募
※Karta:一款新的二進位文件分析和對比插件
※中芯國際出售LFoundry,輕裝上陣征戰先進位程及特色工藝
※V神:我是CBC Casper的粉絲,並不喜歡重新排列的二進位結構奇怪分片
※MYSQL BINLOG 二進位日誌
※一個二進位POC的誕生之旅CVE-2018-0802
※Intel在10nm上不給力,一方面因為與台積電定義先進位程的方式不同有關;許多人認為反壟斷與自己無關,這是誤解