Angular 4如何从API响应体提取并下载Excel文件？

看起来你已经成功拿到了接口响应，但因为没正确处理二进制Blob类型的响应体，所以没法触发下载。下面是具体的修改步骤：

第一步：修改服务代码，正确获取Blob响应 #

首先得告诉Angular，这个请求返回的是二进制文件而非默认的JSON格式。

1. 先导入ResponseContentType：

import { ResponseContentType } from '@angular/http';

2. 修改你的prls方法，添加响应类型配置，并把响应转换为Blob对象：

prls(req?: any): Observable<Blob> {
  const options = createRequestOption(req);
  options.params.set('findAll', req.findAll);
  options.params.set('prlPendiente', req.prlPendiente);
  options.params.set('inicioCaduca', req.inicioCaduca);
  options.params.set('finCaduca', req.finCaduca);

  // 关键配置：指定响应类型为Blob
  options.responseType = ResponseContentType.Blob;

  return this.http.get(this.resourceUrl+'/open/excel', options)
    .map((res: Response) => {
      // 将响应转换为Blob，同时指定Excel的MIME类型，确保浏览器正确识别文件
      return new Blob([res.blob()], { 
        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
      });
    });
}

第二步：在组件中实现下载逻辑 #

接下来在组件里添加按钮点击事件，完成下载流程：

模板部分（HTML） #

<button (click)="downloadExcelFile()">下载Excel文件</button>

组件逻辑（TS） #

import { YourService } from '../path/to/your-service'; // 替换成你的服务实际路径

// ...

constructor(private yourService: YourService) { }

downloadExcelFile() {
  // 这里传入你的查询参数，根据业务需求调整
  const requestParams = {
    findAll: true,
    prlPendiente: false,
    inicioCaduca: '2024-01-01',
    finCaduca: '2024-12-31'
  };

  this.yourService.prls(requestParams).subscribe(
    (excelBlob: Blob) => {
      // 创建临时URL指向Blob对象
      const blobUrl = window.URL.createObjectURL(excelBlob);
      
      // 创建隐藏的a标签触发下载
      const downloadLink = document.createElement('a');
      downloadLink.href = blobUrl;
      downloadLink.download = 'prl-data.xlsx'; // 设置下载的文件名
      
      // 将a标签加入DOM并触发点击
      document.body.appendChild(downloadLink);
      downloadLink.click();
      
      // 清理资源：释放URL并移除临时a标签
      window.URL.revokeObjectURL(blobUrl);
      document.body.removeChild(downloadLink);
    },
    (error) => {
      console.error('下载失败:', error);
      // 这里可以添加用户友好的错误提示，比如弹窗告知下载出错
    }
  );
}

关键注意点 #

• 确保后端接口返回的响应头Content-Type是正确的Excel类型（比如application/vnd.openxmlformats-officedocument.spreadsheetml.sheet），如果后端没设置，我们在创建Blob时手动指定的type参数也能兜底。
• 下载完成后一定要调用window.URL.revokeObjectURL释放资源，避免内存泄漏。

内容的提问来源于stack exchange，提问作者Jose