Ng-Alain,使用Typescript完成文件下载，读取response header

Typescript实现点击下载文件

最近遇到一个需求，点击链接实现文件列表中某一个文件的下载，点击发送http请求后返回的是一个文件流，需要将该文件下载到本地，且因为文件列表的文件名可改变，所以需要读取response header中的filename作为下载的文件名。暂时想到两个方法实现该需求，并成功实践了其中一个。

一. 在Typescript代码中实现下载，以下为我成功运行的代码：

  download() {
    this.http.get(url, [], {
      responseType: "blob",
      //关键就在这，加了observe:'response'才能获取到返回的response header
      observe: 'response',
      headers: new HttpHeaders().append("Content-Type", "application/json")
    }).subscribe(resp => {
      // resp: 文件流
      /*这里可以在控制台看一下你能读取到的所有，header中的key，看是否有你需要的值
      resp.headers.keys().forEach(key => {
              console.log(`${key} => ${resp.headers.get(key)}`);
            });*/
      this.downloadFile(resp);
    });

  }

  downloadFile(data) {
  //当加了observe:'response'之后，文件流数据存储在了resp.body中，response header存储在resp.headers
    const blob = new Blob([data.body], {type: 'application/octet-stream'});
    const url = window.URL.createObjectURL(blob);

    // 以动态创建a标签进行下载
    const a = document.createElement('a');
    //将返回的文件名作为下载的文件名
    const fileName = data.headers.get('content-disposition').split(';')[1].split('=')[1].split('"')[1];
    a.href = url;
    a.download = fileName;
    a.click();
    window.URL.revokeObjectURL(url);
  }

---

在HTML代码中实现下载，以下为Ng-Alain官方文档中的介绍：

使用 “down-file” :一个基于 blob 的文件下载:
1. 导入依赖：yarn add file-saver
2. 直接在代码中加入 down-file,之后可以再使用数据绑定进行请求url、下载的文件名等参数的赋值

<button nz-button  class="mr-sm" down-file 
[http-data]="data" http-url="./assets/demo{{i}}" 
file-name="demo中文">点击下载</button>
	// URL请求参数
    httpData: {};
   //请求类型
    httpMethod: string;
   // 下载地址 
    httpUrl: string;
 	//指定文件名，若为空从服务端返回的 `header` 中获取 `filename`、`x-filename` 
    fileName: string;
    // 成功回调
    readonly success: EventEmitter<HttpResponse<Blob>>;
    // 错误回调 
    readonly error: EventEmitter<any>;