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

新手上路,请多包涵

我有一个 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 许可协议

阅读 806
2 个回答

问题是 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 许可协议

试试 这个

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 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题