Web API 2 - 返回Pdf,在客户端显示/下载接收的Pdf文件(AngularJs)

时间:2016-01-20 16:40:10

标签: javascript c# angularjs pdf asp.net-web-api2

这是我的Web API 2控制器中的代码:

//pdfBytes is a valid set of...pdfBytes, how it's generated is irrelevant
Byte[] pdfBytes = pdfConverter.GeneratePdf(myPdfString);

//using HttpResponseMessage instead of IHttpActionResult here because I read
//that the latter can cause problems in this scenario
var response = new HttpResponseMessage();

//Set reponse content to my PDF bytes
response.Content = new ByteArrayContent(pdfBytes);

//Specify content type as PDF - not sure if this is necessary
response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/pdf");

return response;

如果我在客户端收到PDF后,如何触发浏览器自动下载PDF或在新窗口中打开它? (注意 - 我不确定字节数组是否是我想在这里接收的格式。)

callToGetPdfFromDb()
    .success(function (pdfFromWebApi) {
        console.log('Got pdf...'');
        //How do I show the received PDF to the user? 
    });

我对使用任何类型的文件下载/上传都很陌生,所以如果我遗漏了一些非常基本的东西,我会道歉。作为回应,我对正确方向的指针非常满意。

2 个答案:

答案 0 :(得分:3)

答案here有效。完整的调用/响应,与问题中的C#代码一起使用。请注意,我要离开这个问题,因为我觉得它比现有的更具体,我很难找到答案:

    $scope.getPdf= function(){
        var pdfReportUrl = yourBaseUrl+ '/generatepdf';

        var runDbCallToGetPdf =  function(){
            return $http({
                method: 'GET',
                url: pdfReportUrl,
                responseType:'arraybuffer'
            });
        };

        runDbCallToGetPdf ()
            .success(function (pdfBytes) {
                var pdfFile = new Blob([pdfBytes], {type: 'application/pdf'});
                var pdfFileUrl = URL.createObjectURL(pdfFile );
                window.open(pdfFileUrl);
            });
    };

答案 1 :(得分:1)

您可以在新窗口(或标签页)中打开它,而不是从角度调用Web Api端点。

var getUrl = //path to web api endpoint to get generated pdf
// make sure to inject $window service
$window.open(getUrl, "_blank");

如果正确设置了响应的MIME类型,浏览器应该能够打开pdf。