Angular 7 下载 blob 时文件损坏答案

【问题标题】：Angular 7 get corrupted file while downloading blobAngular 7 下载 blob 时文件损坏
【发布时间】：2020-03-15 00:44:57
【问题描述】：

使用 Angular 7，我通过发布 url 文件来调用 api，并尝试使用 fileSaver 库中的“saveAs”函数下载它。文件正在下载，但无法打开，因为它已损坏。

我的电话如下：

var file_url = (response as any).headers['Location'] + 'files/Data.xlsx';
var filename = 'Data_' + this.getDateService.getDateFile() + '.xlsx';

const httpOptions = {
          headers: new HttpHeaders({
            'Content-Type': 'application/x-www-form-urlencoded'
          }),
          responseType: 'arraybuffer',
          observe: 'response'
        };

let downloadParameters = { filename: 'Data_' + this.getDateService.getDateFile() + '.xlsx', file: file_url }

this.downloadFileService.downloadFile(downloadParameters, httpOptions).subscribe(reponse => {

          var blob = new Blob([(response as any).body], { type: 'application/vnd.openxmlformat-officedocument.spreadsheetml.sheet' });
          saveAs(blob, filename);
})

我尝试了什么：

通过 application/octet-stream 切换类型 MIME application/vnd.openxmlformat-officedocument.spreadsheetml.sheet
通过 blob 或 blob as json 切换 responseType arraybuffer

下面是来自服务的响应头：

文件存在于响应正文中：

你们有什么线索吗？

【问题讨论】：

标签： angular typescript download httpclient filesaver.js

【解决方案1】：

试试这样：

this.downloadFileService.downloadFile(downloadParameters, { responseType: 'blob' }).subscribe(blob=> {
  saveAs(blob, filename);
})

【讨论】：

哇，谢谢，它确实有效。为什么它实际上在没有 httpHeaders 的情况下工作？
这里{ responseType: 'blob' }这是http头。我没有存储在另一个变量中。如果您也对答案投赞成票，那就太好了:)
我写的是“响应”而不是“响应”。它通过纠正这个来工作。