Angular 4.3：使用新的 HttpClient 获取数组缓冲区

Question

我想改用新的 HttpClient。到目前为止，我处理以下文件下载：

getXlsx (): Observable<any> {
    return this.http.get('api/xlsx', {
      responseType: ResponseContentType.ArrayBuffer, // set as ArrayBuffer instead of Json
    })
    .map(res => downloadFile(res, 'application/xlsx', 'export.xlsx'))
    .catch(err => handleError(err));
  }

export function downloadFile(data: any, type: string, filename: string): string {
  const blob = new Blob([data._body], { type });
  const url = window.URL.createObjectURL(blob);

  // create hidden dom element (so it works in all browsers)
  const a = document.createElement('a');
  a.setAttribute('style', 'display:none;');
  document.body.appendChild(a);

  // create file, attach to hidden element and open hidden element
  a.href = url;
  a.download = filename;
  a.click();
  return url;
}

将 respondeType 更改为 'arraybuffer' 将生成空文件。有什么解决办法吗？

Answer 1

所以 Martin 解决了我的问题：

getXlsx (): Observable<any> {
    return this.http.get('api/xlsx', {
      responseType: 'blob' // <-- changed to blob
    })
    .map(res => downloadFile(res, 'application/xlsx', 'export.xlsx'))
    .catch(err => handleError(err));
  }

export function downloadFile(blob: any, type: string, filename: string): string {
  const url = window.URL.createObjectURL(blob); // <-- work with blob directly

  // create hidden dom element (so it works in all browsers)
  const a = document.createElement('a');
  a.setAttribute('style', 'display:none;');
  document.body.appendChild(a);

  // create file, attach to hidden element and open hidden element
  a.href = url;
  a.download = filename;
  a.click();
  return url;
}

Answer 2

上面的方法有效并且是一个可以接受的解决方案，但是看起来有点像代码味道，只是向 DOM 添加锚标记并在您可以以更简洁的方式进行时伪造点击。我们最近在使用 FileSaver(https://www.npmjs.com/package/file-saver) .

的 Angular 5 网站下载文档时遇到了类似的问题。

使用 npm install file-saver 添加 FileSaver 并进行相关导入您可以使用以下代码下载文件：

getDocument(document: Document) {
    let headers = new HttpHeaders(); // additional headers in here

    return this._http.get(url, {
        headers: headers,
        responseType: "blob" // this line being the important part from the previous answer (thanks for that BTW Martin) 
    }).map(
        res => {
            var x = res;
            if (res) {
                let filename = documentName;
                saveAs(x, filename);
            }
            return true;
        },
        err => {
            return true;
        }
    );
}

这将使用本机 saveAs 命令（如果存在），如果不存在，则执行一些其他逻辑来复制功能。

这可能会在幕后做类似的事情（我真的不知道，因为看起来没有变化），但它将它划分为一个易于使用的第三方包，我希望它是维护（祈祷），而我不必更新功能以满足不同包/浏览器的更新版本。

Angular 4.3：使用新的 HttpClient 获取数组缓冲区

Angular 4.3: Getting an arraybuffer with new HttpClient

angular

blob

httpclient

arraybuffer