使用angular 2和.Net核心webapi下载PDF文件

时间:2017-03-07 11:49:14

标签: angular asp.net-web-api .net-core

我正在尝试使用带有.Net核心web api的角度2下载PDF(以及后来的单词,excel和图像)文件。我已经粘贴了一些下载文件的代码示例,但是当我尝试打开下载的文件时,它会给我一个损坏的文件。

这是我的.net核心网络API代码

public HttpResponseMessage GetTestPdfFile()
        {
            var response = new HttpResponseMessage(HttpStatusCode.OK);
            response.Content = new ByteArrayContent(myArray); //byte[] myArray is byte[] of file downloaded from Azure blob
            //response.Content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("inline");
            response.Content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment");
            response.Content.Headers.ContentDisposition.FileName = myFileName;
            response.Content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("application/pdf");
            return response;
        }

我还尝试了另一个代码示例

public FileResult TestDownload(int id)
        {
            HttpContext.Response.ContentType = "application/pdf";
            FileContentResult result = new FileContentResult(myArray, "application/pdf")
            {
                FileDownloadName = "test.pdf"
            };

            return result;
        }

这就是我在角度服务中所拥有的

getTestPdfFile(): Observable<any> {
        let url = 'API_URL'
        let headers1 = new Headers();
        headers1.append('Content-Type', 'application/pdf');
        headers1.append('responseType', 'arrayBuffer');

        return this.http.get(url, {headers: headers1})
            .map(res => {
                var contentType = 'application/pdf';
                var blob = new Blob([res.arrayBuffer()], { type: contentType });
                return blob;
            })
    }

这就是我订阅obsevable

的方式
this.myService.getTestPdfFile()
        .subscribe(blob => {
                var link=document.createElement('a');
                link.href=window.URL.createObjectURL(blob);
                link.download="Test.pdf";
                link.click();
            }, error => {});
    }

2 个答案:

答案 0 :(得分:5)

我必须将我的角度服务改为下面,一切正常

getTestPdfFile(): Observable<any> {
        let url = 'API_URL'
        return this.http.get(url, { responseType: ResponseContentType.Blob })
                        .map(res => res.blob())
                        .catch(this.handleError)
    }

我正在使用它作为我的web api

public FileResult TestDownload(int id)
        {
            HttpContext.Response.ContentType = "application/pdf";
            FileContentResult result = new FileContentResult(myArray, "application/pdf")
            {
                FileDownloadName = "test.pdf"
            };

            return result;
        }

答案 1 :(得分:3)

我从来没有幸运使用observables下载项目。我所做的是使用window.open("http://urlToDocument.Test.pdf", "_blank")。这将下载或提示在新选项卡中下载文件。