使用AngularJS和$ http.post在MVC应用程序中下载文件

Question

Any help is most welcomed and really appreciated.

I have an MVC action which retries a file content from a web service. This action is invoked from a Angular service (located in services.js) using $http.post(action, model) , and the action is returning a FileContentResult object, which contains the byte array and the content type.

public ActionResult DownloadResults(DownloadResultsModel downloadResultsModel)
{
downloadResult = ... // Retrieving the file from a web service
Response.ClearHeaders();
Response.AddHeader("Content-Disposition", string.Format("attachment; filename={0}", downloadResult.FileName));
Response.BufferOutput = false;
return new FileContentResult(downloadResult.Contents, downloadResult.ContentType);
}

The issue I'm having is about the browser not performing the default behavior of handing a file (for example, prompting to open it, saving it or cancel). The action is completed successfully with having the content of the file and the file name (injected to the FileContentResult object), but there s no response from the browser.

When I'm replacing the post with $window.location.href , and construct the URI myself, I'm hitting the action and after it completes the browser is handling the file as expected.

Does anyone can think of any idea how to complete the 'post' as expected?

Thanks,

Elad

Answer 1

I am using below code to download the file, given that the file does exist on the server and client is sending server the full path of the file...

as per you requirement change the code to specify path on server itself.

    [HttpGet]
    public HttpResponseMessage DownloadFile(string filename)
    {
        filename = filename.Replace("\\\\", "\\").Replace("'", "").Replace("\"", "");
        if (!char.IsLetter(filename[0]))
        {
            filename = filename.Substring(2);
        }

        var fileinfo = new FileInfo(filename);
        if (!fileinfo.Exists)
        {
            throw new FileNotFoundException(fileinfo.Name);
        }

        try
        {
            var excelData = File.ReadAllBytes(filename);
            var result = new HttpResponseMessage(HttpStatusCode.OK);
            var stream = new MemoryStream(excelData);
            result.Content = new StreamContent(stream);
            result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
            result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
            {
                FileName = fileinfo.Name
            };
            return result;
        }
        catch (Exception ex)
        {
            return Request.CreateResponse(HttpStatusCode.ExpectationFailed, ex);
        }
    }

and then on client side in angular:

    var downloadFile = function (filename) {
        var ifr = document.createElement('iframe');
        ifr.style.display = 'none';
        document.body.appendChild(ifr);
        ifr.src = document.location.pathname + "api/GridApi/DownloadFile?filename='" + escape(filename) + "'";
        ifr.onload = function () {
            document.body.removeChild(ifr);
            ifr = null;
        };
    };