下载文件时在文件内容中获取类型 [object object]，而不是使用 angular 7 获取 blob答案

【问题标题】：getting type [object object] in file content while downloading file, instead of blob using angular 7下载文件时在文件内容中获取类型 [object object]，而不是使用 angular 7 获取 blob
【发布时间】：2020-09-01 11:25:15
【问题描述】：

使用 Angular 7，我通过 get 方法调用 API，并尝试使用 fileSaver 库中的“saveAs”函数下载文件。

当我从响应标头获取文件名时，无法下载正确的文件并在文件内容中获取 [Object object]，但无论何时使用虚拟名称，它都可以正常工作。

它是组件文件：

         fileName:string="";
         const MIME_TYPE ={
         XLSX:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
         TXT:'text/*',
         PDF:'application/pdf'
         }
         downloadFile(){
           this.DownloadService.downloadFile(
          (data: any) => {
           this.fileName=data.headers.get('fileName');
            const EXT = this.fileName.substr(this.fileName.lastIndexOf('.')+1);
            saveAs(new Blob([data],{type:MIME_TYPE[EXT]}),this.fileName);
          }
        );
    }

下载服务文件

  public downloadFile(callback: (responseData: any) => void): void {
        this.apiService.downloadFile.subscribe((data: any) => {
          if (callback) {
            callback(data);
          }
        });
      }

api服务文件

  downloadFile(param: any): Observable<any> {
          return this.http.get(api/download, {responseType:'blob',observe: 'response' });
        }

在文件内容中输出

[Object object]

【问题讨论】：

标签： javascript css json angular typescript

【解决方案1】：

所以有几点需要考虑。

在某些情况下，如果 blob 类型是 HTML/TXT，您可能需要在创建新 Blob 之前对二进制数据使用 JSON.Stringify()。
如果您使用 Base 64 编码，则需要在服务器上进行编码并在前端解析响应（代码在此处）。

export const base64ToArrayBuffer = (base64) => {
    const binaryString = window.atob(base64);
    const bytes = new Uint8Array(binaryString.length);
    return bytes.map((byte, i) => binaryString.charCodeAt(i));
};

要考虑的另一件事是返回文件的服务器发送的标头。某些 HTTP 请求可能未设置为正确处理响应，并且可能发送不正确的标头。像 Axios 这样的包依赖这些标头来正确解析响应。为防止这种断开连接，您可能需要将“responseType”设置为“blob”。

希望这对来自未来的任何时间旅行者有所帮助。

【讨论】：