excel - 如何在 Angular 8 中下载 excel 文件作为 API 响应

Question

我有一个返回 excel 文档作为响应的 API。请求将是一个简单的 json。
我搜索了谷歌并找到了一些代码库来下载文件，并在我的应用程序中使用了它，但是我遇到了一些错误并且无法找到解决方案。下面是我的代码库。
组件.ts

import rxjs/Rx;

details = {id: 75,name: "some name"}

this.nameService.getData(this.details).subscribe(response => {
this.downloadFile(response);
})

downloadFile(data: Response) {
  const blob = new Blob([data], { type: '.xlsx' });
  const url= window.URL.createObjectURL(blob);
  window.open(url);
}

nameService.ts

getData(postData) {
  return this.httpService.post('https://localhost:8080/getFile/', postData);
}

httpService.ts

constructor(private http: HttpClient)
post(apiEndpoint: string, request: any) :Observable<any> {
 return this.http.post<any>(apiEndpoint,request);
}

使用上面的代码库，我遇到两个错误并且文件没有下载。

得到错误:

"Type Response is not assignable to type Blobpart" in creating the Blob(const blob = new Blob([data], { type: '.xlsx' });)

如果我将数据更改为任何 (downloadFile(data: any))上述错误(1)会消失，但我得到一个 httperror响应为“语法错误:json 中位于 json.parse 位置 0 的意外标记 P

如果有人找到上述问题的任何解决方案，请提供帮助。

Answer 1

您需要设置响应头 { responseType: 'blob'}在请求中。

您需要在创建 blob 文件时传入正确的 MIME-Type。
(例如 application/octet-stream 或 application/vnd.openxmlformats-officedocument.spreadsheetml.sheet )。

组件.ts

downloadFile(data: Response) {
  const blob = new Blob([data], { type: 'application/octet-stream' });
  const url= window.URL.createObjectURL(blob);
  window.open(url);
}