如何下载带有 Angular2 或更高版本的文件

javascript typescript angular download fileapi

2022-08-30 00:32:48

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

请求是好的（与MVC一起工作正常，我们可以记录收到的数据），但我不知道如何保存下载的数据（我主要遵循与本文相同的逻辑）。我确信它非常简单，但到目前为止，我根本没有掌握它。

组件函数的代码如下。我已经尝试了不同的替代方案，据我所知，blob方式应该是要走的路，但是.我甚至找不到窗口的定义，但显然它存在。如果我使用FileSaver.js模块，我会收到相同的错误。所以我想这是最近改变或尚未实现的东西。如何触发A2中的文件保存？createObjectURLURLURL

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);
}

答案 1

问题是可观察对象在另一个上下文中运行，因此当你尝试创建 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' ;

我希望这可以帮助你。

答案 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-在组件中，使用“文件保护程序”解析blob

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

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

这对我有用！