如何使用Angular2下载文件 [英] How do I download a file with Angular2

问题描述

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

请求是确定的（对于MVC可以正常工作，我们可以记录收到的数据），但是我不能找出如何保存下载的数据（我主要遵循与这篇文章）。我相信这很简单，但到目前为止，我根本就没有把握。

组件函数的代码是下面的代码。我已经尝试过不同的选择，blob方式应该是我所了解的方式，但是在 URL c $ c> createObjectURL 中没有函数/ code>。我甚至不能在窗口中找到 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（下载文件时出错），
（）=> console.log（'完成的文件下载'。 ））; 
 
 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 ）; 
} 
  

注意：我知道这不是最小的工作实例，但我已经付出了很多努力，在问题描述中。

解决方案

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

解决此问题存在的许多方法之一如下：

  this._reportService.getReport（）。subscribe（data => this.downloadFile（data）），//控制台。 log（data），
 error => console.log（下载文件时出错），
（）=> console.info（ OK）; 
  

当请求准备就绪时，它将调用定义如下的函数downloadFile：< p

  downloadFile（data：Response）{
 var blob = new Blob（[data]，{type：'text / csv '}）; 
 var url = window.URL.createObjectURL（blob）; 
 window.open（url）; 
} 
  

blob已经完美创建，所以URL var，如果没有打开新窗口，请检查您是否已经导入'rxjs / Rx';

  import'rxjs / Rx'; 
  

希望这可以帮助你。

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.

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.

The code of the component function is bellow. 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 bellow, 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);
}

Note: I know this is not a minimal working example but I have put a lot of effort into the problem description. If you are going to downvote please leave a comment as well.

解决方案

the problem is that the observable run 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");

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

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

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

hope this can help you.

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