angular2/angular4 如何通过$http的post方法请求下载二进制的Excel文件

原文链接:http://www.bubuko.com/infodetail-2121383.html

时间有限,废话就不多说了,直接上干货!

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

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

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值