Angular 7 下载 blob 时文件损坏

Posted 2023-03-22

【中文标题】Angular 7 下载 blob 时文件损坏

【英文标题】：Angular 7 get corrupted file while downloading 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

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

文件存在于响应正文中：

你们有什么线索吗？

【参考方案1】：

试试这样：

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

【讨论】：

哇，谢谢，它确实有效。为什么它实际上在没有 httpHeaders 的情况下工作？

这里 responseType: 'blob' 这是http头。我没有存储在另一个变量中。如果您也对答案投赞成票，那就太好了:)

我写的是“响应”而不是“响应”。它通过纠正这个来工作。