angular blob使用请求下载文件

需求：

我需要模拟点击下载文件，因为后台会返回两种数据。

1、blob 里面是excel(流)

2、blob里面是json(流)，如果生成文件异常的话

思考：

1、区分返回的数据类型

2、分别进行流读取

实现：

区分返回的类型

因为我后台返回json流的时候，会设置请求头是json格式。所以就可以跟正常的文件下载流区分开。根据响应头区分。

resp.type == 'application/json'

代码实现后续功能

常规的绑定点击事件

<button nz-button nzType="default" (click)="downTemplate()">
    <i nz-icon nzType="download"></i>下载
  </button>

使用下面代码读取blob里面的数据(流数据)，

const res =await new Response(resp).text();
console.log(JSON.parse(res).desc);
this.message.create('error', '下载失败');

如果是文件下载的话，就是用下面方法进行模拟点击下载链接

/**
 * 创建blob对象，并利用浏览器打开url进行下载
 * @param data 文件流数据
 */
downloadFile(data) {
  // 下载类型 xls
  const contentType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
  // 下载类型：csv
  const contentType2 = 'text/csv';
  const blob = new Blob([data], { type: contentType });
  
  const url = window.URL.createObjectURL(blob);
  // 打开新窗口方式进行下载
  // window.open(url); 
  // 以动态创建a标签进行下载
  const a = document.createElement('a');
  const fileName = "模板下载";
  a.href = url;
  a.download = fileName + '.xlsx';
  a.click();
  window.URL.revokeObjectURL(url);
}

 

完整代码如下：

downTemplate=()=>{
    const params = {}; // body的参数
    this.httpClient.post('/shellData/download/template?type=13', params, {
      responseType: "blob",
      headers: new HttpHeaders().append("Content-Type", "application/json")
    }).subscribe(async resp=>{
      console.log(resp);
      if(resp.type == 'application/json'){
        const res =await new Response(resp).text();
        console.log(JSON.parse(res).desc);
        this.message.create('error', '下载失败');
      }else{
        this.downloadFile(resp);
      }
    })
  }

  /**
 * 创建blob对象，并利用浏览器打开url进行下载
 * @param data 文件流数据
 */
downloadFile(data) {
  // 下载类型 xls
  const contentType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
  // 下载类型：csv
  const contentType2 = 'text/csv';
  const blob = new Blob([data], { type: contentType });
  
  const url = window.URL.createObjectURL(blob);
  // 打开新窗口方式进行下载
  // window.open(url); 
  // 以动态创建a标签进行下载
  const a = document.createElement('a');
  const fileName = "模板下载";
  a.href = url;
  a.download = fileName + '.xlsx';
  a.click();
  window.URL.revokeObjectURL(url);
}