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

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

请求是可以的(与MVC一起工作很好，我们可以记录接收到的数据)，但我不知道如何保存下载的数据(我主要遵循与本文相同的逻辑)。我确信这是愚蠢的简单，但到目前为止，我根本没有领会它。

组件函数的代码如下。我尝试了不同的替代方案，blob方式应该是我所理解的方式，但URL中没有createObjectURL函数。我甚至不能在窗口中找到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);
}

当前回答

如果你不需要在请求中添加头文件，在Angular2中下载一个文件，你可以做一个简单的(KISS原则):

window.location.href='http://example.com/myuri/report?param=x';

在你的组件中。

2016-08-04 05:37:42

其他回答

试试这个!

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

这对我很管用!

2017-05-11 10:24:39

更新Hector的答案使用文件保护程序和HttpClient的第2步:

public downloadFile(file: File): Observable<Blob> {
    return this.http.get(file.fullPath, {responseType: 'blob'})
}

2018-08-23 20:50:56

如果你只发送参数到一个URL，你可以这样做:

downloadfile(runname: string, type: string): string {
   return window.location.href = `${this.files_api + this.title +"/"+ runname + "/?file="+ type}`;
}

在接收参数的服务中

2019-07-13 23:27:44

通过ajax下载文件总是一个痛苦的过程，在我看来，最好让服务器和浏览器来完成内容类型协商的工作。

我认为最好有

<a href="api/sample/download"></a>

去做它。这甚至不需要打开任何新窗口之类的东西。

示例中的MVC控制器可以如下所示:

[HttpGet("[action]")]
public async Task<FileContentResult> DownloadFile()
{
    // ...
    return File(dataStream.ToArray(), "text/plain", "myblob.txt");
}

2017-01-20 05:13:33

这是为那些寻找如何使用HttpClient和文件保存器的人准备的:

点击安装

NPM安装文件保护程序 NPM install @types/file-saver

API服务类:

export() {
    return this.http.get(this.download_endpoint, 
        {responseType: 'blob'});
}

组件:

import { saveAs } from 'file-saver';
exportPdf() {
    this.api_service.export().subscribe(data => saveAs(data, `pdf report.pdf`));
}

2018-01-29 14:13:55

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

推荐文章

最新文章

标签