如何下载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);
}

当前回答

这个怎么样?

this.http.get(targetUrl,{responseType:ResponseContentType.Blob})
        .catch((err)=>{return [do yourself]})
        .subscribe((res:Response)=>{
          var a = document.createElement("a");
          a.href = URL.createObjectURL(res.blob());
          a.download = fileName;
          // start download
          a.click();
        })

我可以接受。不需要额外包装。

2017-07-13 00:28:33

其他回答

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

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

2018-08-23 20:50:56

下载和显示PDF文件，一个非常相似的代码剪辑如下:

  private downloadFile(data: Response): void {
    let blob = new Blob([data.blob()], { type: "application/pdf" });
    let url = window.URL.createObjectURL(blob);
    window.open(url);
  }

  public showFile(fileEndpointPath: string): void {
    let reqOpt: RequestOptions = this.getAcmOptions();  //  getAcmOptions is our helper method. Change this line according to request headers you need.
    reqOpt.responseType = ResponseContentType.Blob;
    this.http
      .get(fileEndpointPath, reqOpt)
      .subscribe(
        data => this.downloadFile(data),
        error => alert("Error downloading file!"),
        () => console.log("OK!")
      );
  }

2017-06-15 11:40:34

我今天也遇到了同样的情况，我不得不下载一个pdf文件作为附件(该文件不应该在浏览器中呈现，而是下载)。为了达到这个目的，我发现我必须在Angular Blob中获取文件，同时在响应中添加一个Content-Disposition头。

这是我能得到的最简单的(Angular 7):

服务内部:

getFile(id: String): Observable<HttpResponse<Blob>> {
  return this.http.get(`./file/${id}`, {responseType: 'blob', observe: 'response'});
}

然后，当我需要下载组件中的文件时，我可以简单地:

fileService.getFile('123').subscribe((file: HttpResponse<Blob>) => window.location.href = file.url);

更新:

从服务中删除不必要的报头设置

2019-05-10 21:06:54

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

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

在你的组件中。

2016-08-04 05:37:42

定位12 +最高一个网站

您可以从服务器返回一个Blob对象，并创建一个锚标记，并将href属性设置为从Blob创建的对象URL。现在点击锚点将下载文件。您也可以设置文件名。

downloadFile(path: string): Observable<any> {
        return this._httpClient.post(`${environment.ApiRoot}/accountVerification/downloadFile`, { path: path }, {
            observe: 'response',
            responseType: 'blob'
        });
    }

saveFile(path: string, fileName: string): void {
            this._accountApprovalsService.downloadFile(path).pipe(
                take(1)
            ).subscribe((resp) => {
                let downloadLink = document.createElement('a');
                downloadLink.href = window.URL.createObjectURL(resp.body);
                downloadLink.setAttribute('download', fileName);
                document.body.appendChild(downloadLink);
                downloadLink.click();
                downloadLink.remove();
            });
            
        }

后端

[HttpPost]
[Authorize(Roles = "SystemAdmin, SystemUser")]
public async Task<IActionResult> DownloadFile(FilePath model)
{
    if (ModelState.IsValid)
    {
        try
        {
            var fileName = System.IO.Path.GetFileName(model.Path);
            var content = await System.IO.File.ReadAllBytesAsync(model.Path);
            new FileExtensionContentTypeProvider()
                .TryGetContentType(fileName, out string contentType);
            return File(content, contentType, fileName);
        }
        catch
        {
            return BadRequest();
        }
    }

    return BadRequest();

}

2021-10-01 18:34:44

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

推荐文章

最新文章

标签