如何在 Angular 8 中下载 Excel 文件作为 API 响应 [英] How to download an excel file in Angular 8 as an API response

问题描述

我有一个 API，它返回一个 excel 文档作为响应.请求将是一个简单的 json.

我在谷歌上搜索并找到了一些代码库来下载文件，并且我已经在我的应用程序中使用了它，但是我遇到了一些错误并且无法找到解决方案.下面是我的代码库.

component.ts

import rxjs/Rx;详细信息 = {id: 75,name: "some name"}this.nameService.getData(this.details).subscribe(response => {this.downloadFile(响应);})下载文件(数据:响应){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

构造函数(私有http:HttpClient)post(apiEndpoint: string, request: any) :Observable{返回 this.http.post(apiEndpoint,request);}

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

1. 出现错误:

<块引用>

类型响应不能分配给类型 Blobpart"在创建 Blob(const blob = new Blob([data], { type: '.xlsx' });)

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

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

解决方案

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

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

component.ts

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

I've an API which returns an excel document as response. The request will be one simple json.

I've searched google and found some code base to download the file and I've used it in my application, but I'm getting some errors and unable to find it out the solution. Below are my code base.

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

with the above code base I'm getting below two errors and the file is not downloaded.

1. Getting the error :

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

2. If I change the data as any (downloadFile(data: any)) the above error(1) will go but I'm getting an httperror response as 'Syntax error: unexpected token P in json at position 0 at json.parse

Kindly help if anyone finds any solution to the above issues.

解决方案

1. You need to set the response-header { responseType: 'blob'} in the request.

2. You need to pass in the correct MIME-Type as you'are creating the blob-file. (f.e. application/octet-stream or application/vnd.openxmlformats-officedocument.spreadsheetml.sheet).

component.ts

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

这篇关于如何在 Angular 8 中下载 Excel 文件作为 API 响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！