使用angularJS和asp.net mvc下载文件 [英] download file using angularJS and asp.net mvc

问题描述

我是使用asp.net mvc进行开发的初学者.我正在尝试下载文件(图像，pdf ..)，这是我的代码

I'm a beginner in developing using asp.net mvc. I'm trying to download files (images, pdf..) Here is my code

在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中结构良好.

The problem is I get an undefined and an empty file. I debugged the code it works fine, the data from the asp controller is well structured int the HttpResponse.

我该怎么做才能使其正常工作.欢迎其他任何使下载功能正常运行的建议.

What can I do to make it work. Any other suggestions to get the download to function are welcomed.

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

I changed the download funtion in the asp.net controller. I used the HttpResponseMessage class. In the solution, I used the Response class.

asp控制器现在是:

the asp controller is now :

    [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();

                }

    }

推荐答案

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

                transformRequest: angular.identity,

            }).

angular.identity阻止Angular对我们的数据做任何事情(例如序列化它).

angular.identity prevents Angular to do anything on our data (like serializing it).

这篇关于使用angularJS和asp.net mvc下载文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！