如何使用 Angular2 或更高版本下载文件

小编典典

如何使用 Angular2 或更高版本下载文件

all

我有一个 WebApi / MVC 应用程序，我正在为其开发一个 angular2 客户端（以替换 MVC）。我在理解 Angular
如何保存文件时遇到了一些麻烦。

请求没问题（适用于
MVC，我们可以记录接收到的数据）但我不知道如何保存下载的数据（我主要遵循与本文相同的逻辑）。我确信它非常简单，但到目前为止我还没有掌握它。

组件函数的代码如下。createObjectURL我尝试了不同的替代方案，据我所知，blob 方式应该是可行的方式，但是URL.
我什至找不到URLin window
的定义，但显然它存在。如果我使用该FileSaver.js模块，我会得到同样的错误。所以我想这是最近发生变化或尚未实施的事情。如何触发文件保存在
A2 中？

downloadfile(type: string){

    let thefile = {};
    this.pservice.downloadfile(this.rundata.name, type)
        .subscribe(data => thefile = new Blob([data], { type: "application/octet-stream" }), //console.log(data),
                    error => console.log("Error downloading the file."),
                    () => console.log('Completed file download.'));

    let url = window.URL.createObjectURL(thefile);
    window.open(url);
}

为了完整起见，获取数据的服务如下，但它唯一做的就是发出请求并在成功时不映射传递数据：

downloadfile(runname: string, type: string){
   return this.authHttp.get( this.files_api + this.title +"/"+ runname + "/?file="+ type)
            .catch(this.logAndPassOn);
}

阅读 61

2022-05-25

共1个答案

小编典典

问题是 observable 在另一个上下文中运行，所以当你尝试创建 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 var，如果未打开新窗口，请检查您是否已导入 ‘rxjs/Rx’ ；

import 'rxjs/Rx' ;

我希望这可以帮助你。

2022-05-25