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

Question

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

当我从响应 header 获取文件名然后无法下载正确的文件并在文件内容中获取 [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]

Answer 1

所以有几点需要考虑。

1. 在某些情况下，如果 blob 类型为 HTML/TXT，您可能需要在创建新 Blob 之前对二进制数据使用 JSON.Stringify()。

2. 如果您使用 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));
};

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

希望这对 future 的时间旅行者有帮助。