关于在angular项目中使用post请求下载文件的方法及注意点

需求描述

1. 使用HttpClient.post进行请求；
2. 请求返回的主体内容为文件流。可在浏览器开发者工具中查看请求的响应头，其中content-type字段的值为application/octet-stream; charset=utf8；

解决方案

1. service请求如下：

download(path:string,body:any):Observable<any> {
    return this.http.post(`${this.resourceUrl}/download/${path}`,body, {responseType:"blob"});
  }

2. 使用该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。博主是傻子，因为这个搞了几个小时，血泪教训！！！