Question

我有一个REST API，如果我直接在浏览器中查询，它会返回一个JSON或CSV文件进行下载。我想用Angular HttpModule做同样的事情。

我的get请求很简单（它有一个查询字符串参数来指示要返回的文件格式）：

public Submit(request: Request) {
  ...
  return this.http.get(url).subscribe(response => {
    //What here
  });
}

响应内容类型为application/octet-stream。我已经尝试将响应处理为blob，但这不起作用。我怎样才能将服务器的响应传递给浏览器并让它下载文件？此方法是响应按钮单击

的组件调用的服务的一部分

onClick() {
    this._requestService.Submit(request); //This gets the Subscription response from the service, but I want it to let the broswer download the file
}

Answer 1

你可以尝试这样的事情：

this.http.get(url).subscribe(response => {
  const blob = new Blob([response], { type: 'text/csv' });
  const url= window.URL.createObjectURL(blob);
  window.open(url);
});

Answer 2

你必须添加

{ responseType: ResponseContentType.Blob }

然后将响应映射到blob。

return this.http.get(url, { responseType: ResponseContentType.Blob })
    .map(r => r.blob())
    .subscribe(response => {

    });

接下来，您可以使用fileSaver.js下载此文件。

Answer 3

我从AngularJS $http-post - convert binary to excel file and download和AngularJS: Display blob (.pdf) in an angular app获得了大部分解决方案。

let ieEDGE = navigator.userAgent.match(/Edge/g);
let ie = navigator.userAgent.match(/.NET/g); // IE 11+
let oldIE = navigator.userAgent.match(/MSIE/g); 

let blob = new Blob([response.text()], { type: "application/octet-stream"});
let fileName: string = "myfile." + this.request.output;

if (ie || oldIE || ieEDGE) {
  window.navigator.msSaveBlob(blob, fileName);
}
else {
  let link = document.createElement('a');
  link.href = window.URL.createObjectURL(blob);
  link.download = fileName;
  link.click(); 

  setTimeout(function () {
    window.URL.revokeObjectURL(url);
  }, 0);
}

对于非IE浏览器（“else”语句），我也能够成功使用

let reader = new FileReader();
reader.onloadend = function () {
  window.location.href = reader.result;
};

reader.readAsDataURL(blob);

对于第二种方法，blob类型为application/octet-stream非常重要，否则对于类似application/json或text/csv的内容，它将在新窗口/选项卡中打开文件。缺点是您无法提供文件名或扩展名，因此您将获得一个名为“download”的原始文件。

Angular 4 HttpModule如何从Get请求返回文件

3 个答案: