使用angularJS和asp.net mvc下载文件

时间:2016-10-24 10:35:41

标签: c# asp.net angularjs asp.net-mvc asp.net-mvc-4

我是使用asp.net mvc开发的初学者。我试图下载文件(图片,pdf ..)这是我的代码

在asp控制器中

    [HttpPost]
    public HttpResponseMessage Download(int id)
    {
        var db = new TutorialGEDEntities();

        Tutorial fileToDownload = db.Tutorials.Find(id);
        string name = fileToDownload.filepath;
        Debug.WriteLine("filepath  " + name);
        try
        {

            if (!string.IsNullOrEmpty(name))
            {
                //var root = System.Web.HttpContext.Current.Server.MapPath(name);
                var filePath = System.Web.HttpContext.Current.Server.MapPath(name); ;
                char[] s = new char[name.Length - name.LastIndexOf("\\") - 1];
                name.CopyTo(name.LastIndexOf("\\")+1, s, 0, name.Length - name.LastIndexOf("\\")-1);
                String fileName = new String(s);
                using (MemoryStream ms = new MemoryStream())
                {
                    using (FileStream file = new FileStream(name, FileMode.Open, FileAccess.Read))
                    {
                        Debug.WriteLine("file  " + file.Length);
                        byte[] bytes = new byte[file.Length];
                        file.Read(bytes, 0, (int)file.Length);
                        ms.Write(bytes, 0, (int)file.Length);

                        HttpResponseMessage httpResponseMessage = new HttpResponseMessage();
                        ByteArrayContent content = new ByteArrayContent(bytes.ToArray());
                        httpResponseMessage.Content = content;
                        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 null;
        }
        catch (Exception ex)
        {
            Debug.WriteLine(ex.Data);
            return null;
        }
    }

并在角度控制器中

                $http({
                    method: 'POST',
                    url: 'Download',
                    data: { 'name': file.filepath },
                    responseType: 'arraybuffer'
                }).success(function (content, status, headers) {
                    headers = headers();
                    console.log(content);
                    console.log(status)
                    var filename = headers['x-filename'];
                    var contentType = headers['content-type'];

                    var linkElement = document.createElement('a');
                    try {
                        var blob = new Blob([content], { type: contentType });
                        console.log(blob);
                        var url = URL.createObjectURL(blob);
                        console.log(url)
                        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);
                });
            };

问题是我得到一个未定义的文件和一个空文件。我调试了它运行良好的代码,来自asp控制器的数据在HttpResponse中结构良好。

我能做些什么才能让它发挥作用。欢迎任何其他建议让下载正常运行。

修改

我更改了asp.net控制器中的下载功能。我使用了HttpResponseMessage类。在解决方案中,我使用了Response类。

asp控制器现在是:

    [HttpPost]
    public void Download(String name)
    {
        Debug.WriteLine("filepath  " + name);

            if (!string.IsNullOrEmpty(name))
            {
                char[] s = new char[name.Length - name.LastIndexOf("\\") - 1];
                name.CopyTo(name.LastIndexOf("\\")+1, s, 0, name.Length - name.LastIndexOf("\\")-1);
                String fileName = new String(s);
                //var filePath = System.Web.HttpContext.Current.Server.MapPath("~/App_Data/") + fileName;

                Response.ContentType = "application/octet-stream";

                Response.AppendHeader("Content-Disposition", fileName);
                Response.AppendHeader("X-FileName", fileName);
                Response.TransmitFile(name);
                Response.End();

                }

    }

1 个答案:

答案 0 :(得分:2)

         $http({
                method: 'POST',
                url: 'Download',
                data: { 'name': file.filepath },
                responseType: 'arraybuffer',
                transformRequest: angular.identity,
            }).

angular.identity阻止Angular对我们的数据执行任何操作(如序列化)。