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

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 = https://www.it610.com/article/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、下载的文件名等参数的赋值

// URL请求参数 httpData: {}; //请求类型 httpMethod: string; // 下载地址 httpUrl: string; //指定文件名，若为空从服务端返回的 `header` 中获取 `filename`、`x-filename` fileName: string; // 成功回调 readonly success: EventEmitter>; // 错误回调 readonly error: EventEmitter;

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