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

Question

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

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

组件函数的代码如下。我尝试了不同的替代方案，据我所知，blob 方式应该是可行的方式，但是 createObjectURL 中没有函数 URL 。我什至无法在窗口中找到 URL 的定义，但显然它存在。如果我使用 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);
}

原文由 rll 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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' ;

我希望这可以帮助你。

原文由 Alejandro Corredor 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

试试 这个！

1 - 安装显示保存/打开文件弹出窗口的依赖项

npm install file-saver --save
npm install -D @types/file-saver

2-使用此功能创建服务以接收数据

downloadFile(id): Observable<Blob> {
    let options = new RequestOptions({responseType: ResponseContentType.Blob });
    return this.http.get(this._baseUrl + '/' + id, options)
        .map(res => res.blob())
        .catch(this.handleError)
}

3- 在组件中使用“file-saver”解析 blob

 import {saveAs as importedSaveAs} from "file-saver";

  this.myService.downloadFile(this.id).subscribe(blob => {
            importedSaveAs(blob, this.fileName);
        }
    )

这对我有用！

原文由 Hector Cuevas 发布，翻译遵循 CC BY-SA 4.0 许可协议