需求描述
- 使用
HttpClient.post
进行请求; - 请求返回的主体内容为文件流。可在浏览器开发者工具中查看请求的响应头,其中
content-type
字段的值为application/octet-stream; charset=utf8
;
解决方案
- service请求如下:
download(path:string,body:any):Observable<any> {
return this.http.post(`${this.resourceUrl}/download/${path}`,body, {responseType:"blob"});
}
- 使用该service并将获取到的文件流下载下来:
XXXService.download(path,body).subscribe(res=>{
const contentType = 'XXX';//自行定义文件类型
const blob = new Blob([res], { type: contentType });
const url = window.URL.createObjectURL(blob);
// 以动态创建a标签进行下载
const a = document.createElement('a');
const fileName = "模板下载";
a.href = url;
a.download = fileName + '.XXX';//后缀名根据需要任意选择
a.click();
window.URL.revokeObjectURL(url);
})
遇到问题
出现特殊情况:请求成功且有返回,但请求被拦截,报错情况如上。
问题解决
原因:请求返回内容格式为文件流,而前端默认请求返回内容的是JSON格式,存在冲突。此时,需要明确定义请求返回格式。
正确写法见解决方案第一点
。
注意事项
:
1.responseType:"blob"
为必填项
2.post
区别于get
请求,它有三个参数(url
,body
,options
),其中url
与body
为必有项,options
不一定有,而responseType:"blob"
为options
中的一项。存在一种情形:发送post
请求时无需传body
,此时,我们仍需把body
的位置空出来,保证options在其对应的位置,即post(url,null
,{ responseType:"blob" }
),否则出现 post(url,{ responseType:"blob" }
) 代码,请求会将{ responseType:"blob" }
认为是body。博主是傻子,因为这个搞了几个小时,血泪教训!!!