angular 笔记 之 下载文件

通常情况下,我们下载文件时使用 window.open(url)方法传入后台对应接口地址即可打开浏览器下载:
html:

<button nz-button nzType="primary" (click)="onDownload()">导出</button>
<frame style="display:none" name="view_frame"></frame>

ts:

/**下载 */
  onDownload() {
    var value = '?name=' + this.name;
    url = 'http://***' + value
    window.open(url,view_frame);
  }

这种方式需要后台把下载地址放到白名单,不然没有权限访问

如果需要token验证的话,那么这种方式就不能满足需求了
可以用另外一种方式:

constructor(private http: _HttpClient) {}
/**下载 */
  onDownload() {
    var req: any = {name:this.name};
    var url = "http://***"
    this.http.get(url , req, {
      headers: new HttpHeaders({ 'Content-Type': 'application/vnd.ms-excel' }),
      observe: 'response',
      responseType: 'blob',
      withCredentials: true,
    }).subscribe(
      data => {
        let blob = new Blob([data.body]);
        let objectUrl = URL.createObjectURL(blob);
        let a = document.createElement('a');
        document.body.appendChild(a);
        a.setAttribute('style', 'display:none');
        a.setAttribute('href', objectUrl);
        a.setAttribute('download', "文件名" + '.xls');
        a.click();
        URL.revokeObjectURL(objectUrl);
      },
      error => {
        this.message.error('下载失败,请稍后重试!');
        console.error('StatementDailyTemperatureComponent list Error ->', error);
      },
    );
  }