使用 FileSaver.js 从 Azure Blob 存储下载损坏的文件答案

【问题标题】：Corrupt File download from Azure Blob Storage using FileSaver.js使用 FileSaver.js 从 Azure Blob 存储下载损坏的文件
【发布时间】：2017-08-08 02:10:00
【问题描述】：

我在 Azure 中有一个 Excel 电子表格，我正在使用 SAS 公开它，下载后它说文件已损坏。这是保存和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);
            });

文件以正确的文件名下载，但是当我打开它时，我在 Excel 中收到一个错误，提示文件已损坏。

【问题讨论】：

标签： angular azure-blob-storage filesaver.js

【解决方案1】：

我不是 Angular2 方面的专家，但我认为应该将响应正文转换为 arraybuffer。关于如何处理，可以阅读SO上的this post。

以下是使用纯 Javascript 和 FileSaver.js 从 Azure Blob 存储下载文件的示例。

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

【讨论】：