时间有限,废话就不多说了,直接上干货!
下面给大家介绍一下我遇到的一个坑,如果你也遇到了,那恭喜你,你一定能找到答案:angular2/angular4 如何通过$http的post方法请求下载二进制的Excel文件? (angular1自行百度)
问题描述:
后台返回的是一个二进制的Excel流,请求头如下:
Access-Control-Allow-Origin:*Cache-Control:privateContent-Disposition:attachment;filename=%E9%A9%BE%E9%A9%B6%E5%91%98%E8%AF%84%E5%88%86.xlsxContent-Type:application/vnd.ms-excel; charset=UTF-8Date:Thu, 15 Jun 2017 03:19:11 GMTServer:Microsoft-IIS/8.5Transfer-Encoding:chunkedX-AspNet-Version:4.0.30319X-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是什么意思呢?我只是简单的将一下,想深入了解,可以看看张鑫旭的
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,好了,大概的思路就是这样了,如果你还有什么不明白的,欢迎给我留言,我会尽快给你回复!
原创不易,如需转载,请注明出处,谢谢!