ASP.NET MVC and FileAPI - Unable to open downloaded Excel File

Question

I looked up here - http://blog.falafel.com/file-downloads-asp-net-mvc/ and here - Handle file download from ajax post

And came up with a solution to download an existing file from my server using the following snippets :

The JavaScript Call-

function GetExcelData()
{
    debugger;
    var data = { prop: 1, myArray: [1, "two", 3] };
    var params = JSON.stringify(data);
    var url = '/Export/DownloadWidgetDataFile';
    $.ajax({
        type: "POST",
        url: url,
        data: "pInputData="+params,
        success: function (response, status, xhr) {
            // check for a filename
            var filename = "";
            var disposition = xhr.getResponseHeader('Content-Disposition');
            if (disposition && disposition.indexOf('attachment') !== -1) {
                var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
                var matches = filenameRegex.exec(disposition);
                if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, '');
            }

            var type = xhr.getResponseHeader('Content-Type');
            var blob = new Blob([response], { type: type });

            if (typeof window.navigator.msSaveBlob !== 'undefined') {
                // IE workaround for "HTML7007: One or more blob URLs were revoked by closing the blob for which they were created. These URLs will no longer resolve as the data backing the URL has been freed."
                window.navigator.msSaveBlob(blob, filename);
            } else {
                var URL = window.URL || window.webkitURL;
                var downloadUrl = URL.createObjectURL(blob);

                if (filename) {
                    // use HTML5 a[download] attribute to specify filename
                    var a = document.createElement("a");
                    // safari doesn't support this yet
                    if (typeof a.download === 'undefined') {
                        window.location = downloadUrl;
                    } else {
                        a.href = downloadUrl;
                        a.download = filename;
                        document.body.appendChild(a);
                        a.click();
                    }
                } else {
                    window.location = downloadUrl;
                }

                setTimeout(function () { URL.revokeObjectURL(downloadUrl); }, 100); // cleanup
            }
            alert('Success Called');
        },
        error: function (jqXHR, text, status) {
            alert('error');
        }

    });
}

And the Action method in the controller :

[HttpPost]
        public FileResult DownloadWidgetDataFile(string pInputData)
        {
            string tFileDownloadPath = Server.MapPath("../Export/DownloadFile.xlsx");
            System.Web.HttpContext.Current.Response.AddHeader("Content-Disposition", "attachment;filename=DownloadFile.xlsx");
            System.Web.HttpContext.Current.Response.End();
            return File(tFileDownloadPath, "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");          

        }

Now everything seems to work fine but when I try to open the downloaded ExcelFile I get an error that says : " Excel cannot open the file .... because the file format or file extension is not valid. Verify that the file has not been corrupted...."

Not able to figure out whats causing the issue.

Answer 1

There are 2 problems. First, the jQuery ajax call seems to mangle the binary data, so XMLHttpRequest should be used instead:

var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function () {
    if (this.status === 200) {
        var filename = "";
        var disposition = xhr.getResponseHeader('Content-Disposition');
        if (disposition && disposition.indexOf('attachment') !== -1) {
            var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
            var matches = filenameRegex.exec(disposition);
            if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, '');
        }
        var type = xhr.getResponseHeader('Content-Type');

        var blob = new Blob([this.response], { type: type });
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
            // IE workaround for "HTML7007: One or more blob URLs were revoked by closing the blob for which they were created. These URLs will no longer resolve as the data backing the URL has been freed."
            window.navigator.msSaveBlob(blob, filename);
        } else {
            var URL = window.URL || window.webkitURL;
            var downloadUrl = URL.createObjectURL(blob);

            if (filename) {
                // use HTML5 a[download] attribute to specify filename
                var a = document.createElement("a");
                // safari doesn't support this yet
                if (typeof a.download === 'undefined') {
                    window.location = downloadUrl;
                } else {
                    a.href = downloadUrl;
                    a.download = filename;
                    document.body.appendChild(a);
                    a.click();
                }
            } else {
                window.location = downloadUrl;
            }

            setTimeout(function () { URL.revokeObjectURL(downloadUrl); }, 100); // cleanup
        }
    }
};
xhr.send("pInputData=" + params);

Second, the MVC code closes the response before the file data should be sent. Here's the proper way to add the header and then send the file data:

[HttpPost]
public FileResult DownloadWidgetDataFile(string pInputData)
{
    string tFileDownloadPath = Server.MapPath("../Export/DownloadFile.xlsx");
    Response.AddHeader("Content-Disposition", "attachment;filename=DownloadFile.xlsx");
    return File(tFileDownloadPath, "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
}