如何使用 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);
}

推荐答案

问题是 observable 在另一个上下文中运行，所以当您尝试创建 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 变量，如果没有打开新窗口，请检查您是否已经导入了 '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' ;

希望能帮到你.

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