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

Posted 2023-03-13

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

【英文标题】：getting type [object object] in file content while downloading file, instead of blob using angular 7

【发布时间】：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]

【参考方案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”。

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