带有内容名称的 Angular 文件下载 Content-Disposition

Question

我想使用 Angular 下载生成的 xls 文件，并根据响应标头 Content-Disposition 设置文件名。

我用类似的东西

downloadFile(): Observable<any> {
  var url= "http://somehting";
  return this.http.get(url, { observe: 'response', responseType: 'blob' as 'json' });  
}

然后在我的控制器中：

this.dataService.downloadFile().subscribe(
    data => {
        this.debug.msg("response:", JSON.stringify(data));
        saveAs(data.body, "test.xlsx");
    },
    err => {
        console.error(err);
        alert("Problem while downloading the file.\n" + "[" + err.status + "] " + err.statusText);
    }
);

不幸的是，响应标头未设置，正文也是空的。

response: {
   "headers":{
      "normalizedNames":{

      },
      "lazyUpdate":null
   },
   "status":200,
   "statusText":"OK",
   "url":"http://localhost:4200/MyEndpoint/GetDownload",
   "ok":true,
   "type":4,
   "body":{

   }
}

如果我将过程更改为responseType: blob，那么我能够获取文件的内容，但我不知道如何访问response.headers. 我是否错过了什么？如果是的话，那是什么？

Answer 1

基于其他堆栈溢出帖子......这对我有用

在服务器上设置标头

Response.Headers.Add("Access-Control-Expose-Headers", "content-disposition");

Angular dataService 定义下载程序。重要的是设置 observable 为 HttpResponse

  downloadFile(): Observable<HttpResponse<Blob>> {

    var url =  "http://host/GetDownload";

    return this.http.get<Blob>(url, { observe: 'response', responseType: 'blob' as 'json' });
  }

和控制器

 this.dataService.downloadFile().subscribe(
      data => {

        var fileName = "report.xlsx";
        const contentDisposition = data.headers.get('Content-Disposition');
        if (contentDisposition) {
          const fileNameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
          const matches = fileNameRegex.exec(contentDisposition);
          if (matches != null && matches[1]) {
            fileName = matches[1].replace(/['"]/g, '');
          }
        }

        saveAs(data.body, fileName);
      },
      err => {
        console.error(err);
        this.blockUI.stop();
        alert("Problem while downloading the file.\n"+
            "["+err.status+"] "+err.statusText);
      });
}