Corrupt File download from Azure Blob Storage using FileSaver.js

Question

I have a Excel Spreadsheet in Azure that I am exposing using a SAS and after downloading, it says the file is corrupt. Here is the code to save and uri

var result : any= {};
result.fileUri =
    "https://mystorageaccount.blob.core.windows.net/market-files/33b55b3c-8997-405c-af31-33f6f3e79daf?sv=2016-05-31&sr=b&sig=5Xw%2F4UPcdXbXrxd4mIcZUPQX%2FZzVZfDTQoTfr5V6NTY%3D&st=2017-03-16T18%3A00%3A12Z&se=2017-03-17T18%3A05%3A12Z&sp=rw";

this.http.get(result.fileUri).subscribe(
             (response: any) => {
                                 var mediaType = 'application/octet-stream';
                                 var blob = new Blob([response._body], { type: mediaType });
                                 var filename = 'test.xlsx';
                                 saveAs(blob, filename);
            });

File is downloaded with correct filename but when I open it, I get an error in Excel saying the file is corrupt.

Answer 1

I'm not an expert in Angular2, but I believe that the response body should be converted to arraybuffer. About how to deal with it, you can read this post on SO.

Here is an example of downloading the file from Azure Blob Storage with plain Javascript and FileSaver.js.

var fileUri = "https://storageaccount.blob.core.windows.net/market-files/<bolbNameAndSAS>";
var oReq = new XMLHttpRequest();
oReq.open("GET", fileUri, true);
oReq.responseType = "arraybuffer";

oReq.onload = function(oEvent) {
    var blob = new Blob([oReq.response], {type: "application/octet-stream"});
    var filename = 'test.xlsx';
    saveAs(blob, filename);
};

oReq.send();