an xlsm file is corrupted when dowloaded at client side

Question

Pleasssse help me... I have an xlsm file (excel with macro) on the server side (c#), and want to download it on client side (javascript, angularjs). So.. in the server side controller I'm returning an HttpResponseMessage and in the client side - downloading it.

The problem is that when opening the file that was downloaded, it is corrupted...

I made a short test case to demonstrate the problem.

---

Server side (c# ApiController):

[HttpGet]
public HttpResponseMessage exportDPs()
{            
    var response = new HttpResponseMessage(System.Net.HttpStatusCode.OK);
    var stream = new FileStream(@"D:\excel\data.xlsm", FileMode.Open);
    response.Content = new StreamContent(stream);
    response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment");
    response.Content.Headers.ContentDisposition.FileName = "DPs.xlsm";
    response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
    response.Content.Headers.ContentLength = stream.Length;
    response.StatusCode = System.Net.HttpStatusCode.OK;
    return response;
}

---

Client side (javascript, angularjs) :

$scope.exportDPs = function () { 
    $http({
        method: GET,
        url: '../Api/DPs/exportDPs',
    }).success(function (data) { 
        var file = data;
        var encodedUri = encodeURI(file);
        var link = document.createElement("a");
        link.setAttribute("href", "data:application/vnd.ms-excel.sheet.macroEnabled.12;charset=utf-8,\uFEFF" + encodedUri);
        link.setAttribute("download", "DPs");
        link.click();                        
    })       
}

Answer 1

The problem could be that you are prefixing the content from the server with a Unicode Byte-order mark (BOM) - \uFEFF. The BOM is only useful for text files, but XLSM is a binary file (to be more specific, it's a ZIP file of XML files).

However, instead of worrying about that, the best thing to do is to simplify your JavaScript so that you are downloading the file directly instead of trying to download the file in the background and make a data URI out of it.

This should do what you want:

$scope.exportDPs = function () {
    var link = document.createElement("a");
    link.setAttribute("href", "../Api/DPs/exportDPs");
    link.setAttribute("download", "DPs");
    link.click();                        
}