使用 Angular 2 和 Web API 下载文件

Question

使用 Angular 2 和 Web API 下载文件

4

我有一个使用Angular 4和Web API的应用程序，我正在尝试使用Web API和TypeScript Blob下载文件。以下是两者的代码示例。当我单击下载按钮时，会向Web API发送一个POST请求，该请求响应发送文件流，TypeScript将此流转换为图像。但是，当我打开此图像时，它显示以下错误 - “我们无法打开此文件”。

代码 -： Web API

    public HttpResponseMessage Download()
    {
        string strFileUrl = "some absolute path";

        if (strFileUrl != "")
        {
            FileInfo file = new FileInfo(strFileUrl);

            HttpResponseMessage response = new HttpResponseMessage(HttpStatusCode.OK);


            var stream = new FileStream(file.FullName, FileMode.Open);
            response.Content = new StreamContent(stream);
        //  response.Content = new ByteArrayContent(CommonUtil.FileToByteArray(file.FullName));
            response.Content.Headers.ContentType = new MediaTypeHeaderValue(CommonUtil.GetContentType(file.Extension.ToLower()));
            response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment") {
                FileName = file.Name
            };
            response.Content.Headers.ContentDisposition.FileName = file.Name;
            response.Content.Headers.ContentLength = file.Length;
            response.Headers.Add("fileName", file.Name);

            return response;
        }
        return new HttpResponseMessage(HttpStatusCode.NotFound);
    }

Angular 组件.ts -

private OnImageDownloadClick()
{
    this.uploadServiceRef.DownloadFile(path).subscribe(x => {

    //  method 1
        let head = x.headers.get("Content-Type");
        let fileName = x.headers.get("fileName");
        this.fileSaverServiceRef.save(x, fileName, head);

        OR

    //  method 2
        let head = x.headers.get("Content-Type");
        var blob = new Blob([x.arrayBuffer], { type: head });

        var fileURL = URL.createObjectURL(blob);
        window.open(fileURL);
    },
    error => console.log(error));
}

Service.ts-

public DownloadFile(path): Observable<any> {
    let obj: any = {
        path: path
    }
    this.headers = new Headers();
    this.headers.append('Content-Type', 'application/json');
    this.headers.append('responseType', ResponseContentType.Blob);

    return this.http.request(DOWNLOAD_DOCUMENT_URL, RequestMethod.Post, this.headers, obj)
        .map((x) => {
            return x;
        });
}

- Akash Shelke

也许你正在寻找的解决方案是这个：https://stackoverflow.com/questions/44871600/download-file-sent-in-response-angular2 - Ludwig

已经尝试过这个解决方案，但它下载的文件是空白的。 - Akash Shelke

这个怎么样？https://dev59.com/71sW5IYBdhLWcg3wTlu8 - JGFMK

您可能也会发现这个链接有用：https://www.iana.org/assignments/media-types/media-types.xhtml - 因为我没有看到您指示下载的文件类型（除了BLOB）。 - JGFMK

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dalcof · Accepted Answer

我在从流创建docx文件时遇到了类似的问题，最终我做了以下处理：

Service.ts:

postAndGetResponse(myParams){
  return this._http.post(this.api, {myParams}, {responseType: ResponseContentType.Blob})
  .map(response => (<Response>response).blob())
  .catch(this.handleError);
}

Component.ts:

downloadFile(){
  this.service.postAndGetResponse(myParams).subscribe(response => {
    var fileName = "nameForFile" + ".extension";
    if(window.navigator.msSaveOrOpenBlob) {
      window.navigator.msSaveOrOpenBlob(response, fileName);
    }else{
      var link = document.createElement('a');
      link.setAttribute("type", "hidden");
      link.download = fileName;
      link.href = window.URL.createObjectURL(response);
      document.body.appendChild(link);
      link.click();
    }
  });
}