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,好了,大概的思路就是这样了,如果你还有什么不明白的,欢迎给我留言,我会尽快给你回复!

原创不易,如需转载,请注明出处,谢谢!