通常情况下,一般使用GET请求进行文件下载,但是存在参数过长,不得不使用POST请求的情况,例如:列表页对选中条目进行下载,但是情况特殊,参数需要传递条目所有信息,而不是id。
使用Blob
- http请求使用blob的返回类型,
- 获取文件流后,对数据进行Blob,
- 再提交给浏览器进行识别下载。
export(){
let array:any = [...this.setOfCheckedId];
let sendMap = array.map(id => {
let mapList = this.listOfData.find(item=>item.id === id)
return {...mapList};
});
this.service.exportFile(sendMap).subscribe(val=>{
this.downloadFile(val);
},err=>{
console.log(err)
})
}
downloadFile(data) {
// 下载类型 xls
const contentType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
// 下载类型:csv
const contentType2 = 'text/csv';
const blob = new Blob([data], { type: contentType });
const url = window.URL.createObjectURL(blob);
// 打开新窗口方式进行下载
//window.open(url);
// 以动态创建a标签进行下载
const a = document.createElement('a');
const fileName = new Date().getTime();
a.href = url;
a.download = fileName + '.xlsx';
a.click();
window.URL.revokeObjectURL(url);
}
exportFile(data): Observable<any> {
const url = `xxx/xxx/xxx`;
return this.http.post(url,data,{responseType: 'arraybuffer'})//此处注意添加responseType,否则请求返回error
.pipe(
map(res => {
return res;
})
)
}