如何使用Angular2或更高版本下载文件 [英] How do I download a file with Angular2 or greater

问题描述

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

I have a WebApi / MVC app for which I am developing an angular2 client (to replace MVC). I am having some troubles understanding how Angular saves a file.

请求正常(与MVC兼容，我们可以记录收到的数据)，但是我不知道如何保存下载的数据(我基本上遵循与

The request is ok (works fine with MVC, and we can log the data received) but I can't figure out how to save the downloaded data (I am mostly following the same logic as in this post). I am sure it is stupidly simple, but so far I am simply not grasping it.

组件功能的代码如下.我尝试了不同的替代方法，据我所知，blob方法应该是可行的方法，但是URL中没有函数createObjectURL.我什至在窗口中找不到URL的定义，但显然它存在.如果我使用 FileSaver.js模块，则会遇到相同的错误.所以我想这是最近更改或尚未实现的事情.如何触发文件保存在A2中?

The code of the component function is below. I've tried different alternatives, the blob way should be the way to go as far as I understood, but there is no function createObjectURL in URL. I can't even find the definition of URL in window, but apparently it exists. If I use the FileSaver.js module I get the same error. So I guess this is something that changed recently or is not yet implemented. How can I trigger the file save in 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);
}

为了完整起见，获取数据的服务如下所示，但是它唯一要做的就是发出请求并成功传递数据而不进行映射:

For the sake of completeness, the service that fetches the data is below, but the only thing it does is to issue the request and pass on the data without mapping if it succeeds:

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

推荐答案

问题是可观察对象在另一个上下文中运行，因此，当您尝试创建URL var时，将有一个空对象，而不是所需的blob.

The problem is that the observable runs in another context, so when you try to create the URL var, you have an empty object and not the blob you want.

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

One of the many ways that exist to solve this is as follows:

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

请求准备就绪后，它将调用定义如下的函数"downloadFile":

When the request is ready it will call the function "downloadFile" that is defined as follows:

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

the blob has been created perfectly and so the URL var, if doesn't open the new window please check that you have already imported 'rxjs/Rx' ;

  import 'rxjs/Rx' ;

我希望这可以为您提供帮助.

I hope this can help you.

这篇关于如何使用Angular2或更高版本下载文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！