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

我有一个API，它返回一个excel文档作为响应。请求将是一个简单的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);
}

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

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

nameService.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);
}

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

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

httpService.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);
}

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

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

构造函数（私有http:HttpClient）
post（端点：字符串，请求：任意）：可观察{
返回this.http.post（apident，request）；
}

根据以上代码，我发现以下两个错误，并且该文件未下载

获取错误：

在创建Blob时，“类型响应不可分配给类型Blobpart”（constBlob=newBlob（[data]，{Type:'.xlsx'}）；）

如果我将数据更改为any

（downloadFile（data:any））

上述错误（1）将消失，但我将得到一个

httperror

响应为“语法错误：json中的意外标记P位于

json.parse的位置0处”

---

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

添加标题

{responseType:'blob'}

像这样：

this.http.post<any>(apiEndpoint,request,{ responseType: 'blob'} )

this.http.post（apident，request，{responseType:'blob'}）

您需要在请求中设置响应头

{responseType:'blob'}

在创建blob文件时，需要传入正确的MIME类型。 （f.e.应用程序/octet流或应用程序/vnd.openxmlformats of icedocument.spreadsheetml.sheet）

组件技术

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

---

要下载该文件，请使用以下代码

下载文件（数据：响应）{
const blob=new blob（[data]，{type:'application/octet stream'}）；
fs.saveAs（blob，fileName+'.xlsx'）；
}

当使用

{responseType:'blob'}

时，正如这里大多数答案所说，我建议使用

responseType:'arraybuffer'

而不是

blob

和

观察：'response'

。您的呼叫将如下所示：

this.httpClient.get(resource, {
  headers: this.httpHeaders, // Any custom client side headers like Authorization
  observe: 'response',
  responseType: 'arraybuffer'
});

这有两个好处：

Arraybuffer是一个通用的字节流，可以使用

Blob

或

Arraybuffer

创建Blob对象，使用

内容类型

observe:'response'

还将包括您在解析的响应中在服务器上设置的响应头

我使用此方法将

arraybuffer

的文件名和MIME类型放入

Content-Disposition

和

Content-Type

响应头中，然后在客户端使用通用下载服务

此外，我建议使用

文件

对象，而不仅仅是

Blob

，这样您就可以灵活地为其指定如下文件名：

public downloadFile(response: any, fileName?: string) {
    const blob = new Blob([response.body], { type: response.headers.get('content-type') });
    fileName = fileName || response.headers.get('content-disposition').split(';')[0];
    const file = new File([blob], fileName, { type: response.headers.get('content-type') });
    saveAs(file);
}

---

这也将解决@knbibin关于使用自定义文件名的问题。

在请求中设置响应头

{responseType:'blob'}

要下载excel，请使用以下功能

响应-api响应， 文件名-excel名称

downloadExcel(response, fileName) {
    // Doing it this way allows you to name the file
    var link = document.createElement('a');
    link.href = window.URL.createObjectURL(res);
    link.download = fileName;
    link.click();
  }

---

您需要在get请求中添加{responseType:'application/octet stream'}，因为不需要调用post方法

{ responseType : 'application/octet-stream'}

和在.ts文件中

下载Excel（）{
this.MprService.downLoadRFQInfoExcel（this.revisionId）.subscribe（数据=>{this.downloadFile（数据）}）；
}
下载文件（数据：Blob）{
const contentType='application/vnd.openxmlformats ficedocument.spreadsheetml.sheet'；
constblob=newblob（[data]，{type:contentType}）；
constURL=window.url.createObjectURL（blob）；
窗口打开（url）；
}

我已将HttpHeader设置为blob，但仍然存在相同的问题。如何获取具有特定文件名的文件？说“NameList.xlsx”？根据免费字典，“fs”有195个定义。请在这里查看：因此，为了清楚起见，请做一些小的，尽管很重要的努力，来澄清您所说的fs.saveAs（…）是什么意思。仅仅粘贴代码并不酷。这实际上是一个npm包（），允许您从浏览器将流保存到文件系统，这回答了上面提出的问题。这可以正常工作，但文件名不起作用