使用ASP.net web API在angular js SPA中下载文件无法正常工作?

时间:2017-01-26 12:23:53

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

我已经使用asp.net实现了使用angular js和WEB API的Web应用程序。 我使用ContentDisposition返回文件名,如下面的WEB API控制器方法。

try
        {

            if (!string.IsNullOrEmpty(fileName))
            {
                string filePath = HttpContext.Current.Server.MapPath("~/App_Data/") + fileName;

                using (MemoryStream ms = new MemoryStream())
                {
                    using (FileStream file = new FileStream(filePath, FileMode.Open, FileAccess.Read))
                    {
                        byte[] bytes = new byte[file.Length];
                        file.Read(bytes, 0, (int)file.Length);
                        ms.Write(bytes, 0, (int)file.Length);

                        HttpResponseMessage httpResponseMessage = new HttpResponseMessage();
                        httpResponseMessage.Content = new ByteArrayContent(bytes.ToArray());
                        httpResponseMessage.Content.Headers.Add("x-filename", fileName);
                        httpResponseMessage.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
                        httpResponseMessage.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment");
                        httpResponseMessage.Content.Headers.ContentDisposition.FileName = "" + fileName + "";

                        httpResponseMessage.StatusCode = HttpStatusCode.OK;
                        return httpResponseMessage;
                    }
                }
            }
            return this.Request.CreateResponse(HttpStatusCode.NotFound, "File not found.");
        }
        catch (Exception ex)
        {
            return this.Request.CreateResponse(HttpStatusCode.InternalServerError, ex);
        }

但是当尝试从客户端访问x-filename名称时,它并不存在。角度代码如下所示。

        $http({
            method: 'GET',
            url: common.serviceUrl(config.apiServices.usermanuals),
            params: { manualId: manualId },
            responseType: 'arraybuffer'
        }).success(function (data, status, headers, config) {
            headers = headers();
            //var test = headers('Content-Disposition');
            var filename = headers['x-filename'];
            var contentType = headers['content-type'];

            var linkElement = document.createElement('a');
            try {
                var blob = new Blob([data], { type: contentType });
                var url = window.URL.createObjectURL(blob);

                linkElement.setAttribute('href', url);
                linkElement.setAttribute("download", filename);

                var clickEvent = new MouseEvent("click", {
                    "view": window,
                    "bubbles": true,
                    "cancelable": false
                });
                linkElement.dispatchEvent(clickEvent);
            } catch (ex) {
                console.log(ex);
            }
        }).error(function (data) {
            console.log(data);
        });

返回如下所示的标题

enter image description here

文件名未定义 我如何从这里访问ContentDisposition。请帮忙

由于

1 个答案:

答案 0 :(得分:0)

将以下代码添加到控制器中,它解决了问题。

exposedHeaders:" x-filename"

[EnableCors(origins: "*", headers: "*", methods: "*", exposedHeaders: "x-filename")]