Angular下载pdf与Web API 2

时间:2016-05-26 14:06:29

标签: javascript angularjs asp.net-web-api

我们正在尝试从网络api v2下载文件,然后使用“另存为”或在浏览器中自动下载,任何解决方案都可以,但无法正常工作。

Chrome中发生的事情是什么,没有做任何事情 在IE中我们得到一个提示“你想让这个网站在你的电脑上打开一个应用程序吗?”点击允许,然后根本没有任何事情发生。

这是WebAPI控制器代码:

    [HttpGet]
    [Route("{pdf}/{getPDF}")]
    public async Task<IHttpActionResult> GetPDF()
    {
        var outputpath = HttpContext.Current.Server.MapPath("~/");
        HttpResponseMessage result;

        using (FileStream stream = new FileStream(outputpath + "Inv_008618_180868_33687.pdf", FileMode.Open))
        {
            result = new HttpResponseMessage(HttpStatusCode.OK)
            {
                Content = new StreamContent(stream),                     
            };

            result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/pdf");
            result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
            {
                FileName = "Inv_008618_180868_33687.pdf",
                Size = stream.Length
            };

            return Ok(result);

        }
    }

我认为上面的代码是正确的,但不是100%肯定,因为文件大小非常小。

这是Angular代码:

getPDF: function () {
            var scope = this;
            var urlApi = 'http://localhost:59242/supplier/pdf/';

            return $http({
                url: urlApi,
                responseType: 'arraybuffer'
            }).then(function (response) {
                    var file = new Blob([response], { type: 'application/pdf' });                        
                    var fileURL = URL.createObjectURL(file);

                    var pdf = $sce.trustAsResourceUrl(fileURL);

                    //var element = angular.element('<a/>');
                    //element.attr({
                    //    href: 'data:attachment/pdf;charset=utf-8,' + encodeURI(response),
                    //    target: '_self',
                    //    download: 'test.pdf'
                    //})[0].click();

                    window.open(pdf);
              }

                            return response.data;
                        })
                        .catch(function (err) {
                        })
        }

我要感谢你的回复

1 个答案:

答案 0 :(得分:1)

使用ngFileSaver解决了问题