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

Question

我正在尝试使用带有 .Net core web api 的 angular 2 下载 PDF（以及后来的 word、excel 和图像）文件。我在这里粘贴了一些代码示例来下载文件，但是当我尝试打开下载的文件时，它给了我损坏的文件。

这是我的 .net 核心 web 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;
            })
    }

这就是我订阅 observable 的方式

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

Answer 1

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

Answer 2

我不得不将我的角度服务更改为以下，并且一切正常

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