正如Alejandro correor所提到的，这是一个简单的范围错误。订阅是异步运行的，并且必须将打开放在该上下文中，以便在触发下载时数据完成加载。

也就是说，有两种方法可以做到这一点。正如文档所推荐的，该服务负责获取和映射数据:

//On the service:
downloadfile(runname: string, type: string){
  var headers = new Headers();
  headers.append('responseType', 'arraybuffer');
  return this.authHttp.get( this.files_api + this.title +"/"+ runname + "/?file="+ type)
            .map(res => new Blob([res],{ type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }))
            .catch(this.logAndPassOn);
}

然后，在组件上，我们只需订阅并处理映射数据。有两种可能。第一个，正如最初的帖子所建议的，但需要一个小的修正，正如Alejandro所指出的:

//On the component
downloadfile(type: string){
  this.pservice.downloadfile(this.rundata.name, type)
      .subscribe(data => window.open(window.URL.createObjectURL(data)),
                  error => console.log("Error downloading the file."),
                  () => console.log('Completed file download.'));
  }

第二种方法是使用FileReader。逻辑是相同的，但是我们可以显式地等待FileReader加载数据，避免嵌套，并解决异步问题。

//On the component using FileReader
downloadfile(type: string){
    var reader = new FileReader();
    this.pservice.downloadfile(this.rundata.name, type)
        .subscribe(res => reader.readAsDataURL(res), 
                    error => console.log("Error downloading the file."),
                    () => console.log('Completed file download.'));

    reader.onloadend = function (e) {
        window.open(reader.result, 'Excel', 'width=20,height=10,toolbar=0,menubar=0,scrollbars=no');
  }
}

注意:我试图下载一个Excel文件，即使下载被触发(所以这回答了问题)，文件是损坏的。查看这篇文章的答案以避免损坏文件。

我找到的答案要么是在Angular 13.1上无法运行，要么是不必要的复杂(就像被接受的例子一样)，而且没有解释为什么这是必要的。 对于像Angular这样不断变化的生态系统来说，要求附加版本号是非常有用的。

用户@Aleksandar Angelov提供的迷你代码片段绕过了会话系统，因此需要进行不必要的授权。

根据他的回答，我得出了以下代码:

  downloadConfiguration(url: string, filename: string) {
    this.http.get(url, {responseType: 'blob'})
    .subscribe(data => {
      // console.log("data", data);
      var url = window.URL.createObjectURL(data);
      let downloadLink = document.createElement('a');
      downloadLink.href = url
      downloadLink.setAttribute('download', filename);
      downloadLink.click();
    });
  }

问题是可观察对象运行在另一个上下文中，所以当你尝试创建URL var时，你有一个空对象，而不是你想要的blob。

解决这个问题的众多方法之一如下:

this._reportService.getReport().subscribe(data => this.downloadFile(data)),//console.log(data),
                 error => console.log('Error downloading the file.'),
                 () => console.info('OK');

当请求准备好时，它将调用函数"downloadFile"，定义如下:

downloadFile(data: Response) {
  const blob = new Blob([data], { type: 'text/csv' });
  const url= window.URL.createObjectURL(blob);
  window.open(url);
}

这个blob已经被完美地创建了，所以URL变量，如果没有打开新的窗口，请检查你已经导入'rxjs/Rx';

import 'rxjs/Rx' ;

我希望这能帮助到你。

你也可以直接从你的模板下载一个文件，你使用下载属性和[attr。你可以从组件中提供一个属性值。 这个简单的解决方案应该适用于大多数浏览器。

<a download [attr.href]="yourDownloadLink"></a>

参考:https://www.w3schools.com/tags/att_a_download.asp

好吧，我写了一段代码，灵感来自于上面的许多答案，应该很容易在大多数情况下工作，即服务器发送一个带有内容处置头的文件，而不需要任何第三方安装，除了rxjs和angular。

首先，如何从组件文件调用代码

this.httpclient.get(
   `${myBackend}`,
   {
      observe: 'response',
      responseType: 'blob'
   }
).pipe(first())
.subscribe(response => SaveFileResponse(response, 'Custom File Name.extension'));

正如你所看到的，它基本上是angular的平均后端调用，只有两个变化

我观察的是反应而不是身体 我明确表示响应是一个blob

一旦从服务器获取文件，原则上我就将保存文件的整个任务委托给helper函数(我将其保存在一个单独的文件中)，并将其导入到需要的组件中

export const SaveFileResponse = 
(response: HttpResponse<Blob>, 
 filename: string = null) => 
{
    //null-checks, just because :P
    if (response == null || response.body == null)
        return;

    let serverProvidesName: boolean = true;
    if (filename != null)
        serverProvidesName = false;

    //assuming the header is something like
    //content-disposition: attachment; filename=TestDownload.xlsx; filename*=UTF-8''TestDownload.xlsx
    if (serverProvidesName)
        try {
            let f: string = response.headers.get('content-disposition').split(';')[1];
            if (f.includes('filename='))
                filename = f.substring(10);
        }
        catch { }
    SaveFile(response.body, filename);
}

//Create an anchor element, attach file to it, and
//programmatically click it. 
export const SaveFile = (blobfile: Blob, filename: string = null) => {
    const a = document.createElement('a');
    a.href = window.URL.createObjectURL(blobfile);
    a.download = filename;
    a.click();
}

这样就不再有神秘的GUID文件名了!我们可以使用服务器提供的任何名称，而不必在客户端显式指定它，或者覆盖服务器提供的文件名(如本例所示)。 此外，如果需要的话，可以很容易地改变从内容配置中提取文件名的算法来满足他们的需求，其他一切都不会受到影响——如果在提取过程中出现错误，它只会传递'null'作为文件名。

正如已经指出的另一个答案，IE需要一些特殊处理，一如既往。但随着几个月后chromium edge的推出，我在开发新应用时就不会担心这个问题了(希望如此)。 还有撤销URL的问题，但我有点不太确定，所以如果有人能在评论中帮忙，那就太棒了。

下面的代码适用于我

让HTML像这样:

<button type="button" onclick="startDownload(someData)">Click to download!</button>

JS如下:

let someData = {};
someData.name = 'someName';
someData.fileurl= 'someUrl';

function startDownload(someData){
    let link = document.createElement('a');
    link.href = someData.fileurl; //data is object received as response
    link.download = someData.fileurl.substr(someData.fileurl.lastIndexOf('/') + 1);
    link.click();
}