下面给大家介绍一下我遇到的一个坑,如果你也遇到了,那恭喜你,你一定能找到答案: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,好了,大概的思路就是这样了,如果你还有什么不明白的,欢迎给我留言,我会尽快给你回复!
