使用纯 JavaScript 和 Azure-Storage-Js 下载 Azure 存储 Blob答案

【问题标题】：Downloading an Azure Storage Blob using pure JavaScript and Azure-Storage-Js使用纯 JavaScript 和 Azure-Storage-Js 下载 Azure 存储 Blob
【发布时间】：2019-08-04 16:20:30
【问题描述】：

我正在尝试仅使用纯 Javascript 和 SDK 来执行此操作。我不使用 Node.js。我正在将我的应用程序从 v2 转换为 v10 的 SDK azure-storage-js-v10

azure-storage.blob.js 捆绑文件与 UMD 兼容标准，如果没有找到模块系统，跟随全局变量将被导出：azblob

我的代码在这里：

const serviceURL = new azblob.ServiceURL(`https://${account}.blob.core.windows.net${accountSas}`, pipeline);
const containerName = "container";
const containerURL = azblob.ContainerURL.fromServiceURL(serviceURL, containerName);
const blobURL = azblob.BlobURL.fromContainerURL(containerURL, blobName);

const downloadBlobResponse = await blobURL.download(azblob.Aborter.none, 0);

downloadBlobResponse 如下所示： downloadBlobResponse

使用 v10，如何将 downloadBlobResponse 转换为新的 blob，以便在FileSaver saveAs() 函数中使用？

在azure-storage-js-v2 中，此代码适用于较小的文件：

let readStream = blobService.createReadStream(containerName, blobName, (err, res) => {
    if (error) {
        // Handle read blob error
    }
});

// Use event listener to receive data
readStream.on('data', data => {
    // Uint8Array retrieved
    // Convert the array back into a blob
    var newBlob = new Blob([new Uint8Array(data)]);
    // Saves file to the user's downloads directory
    saveAs(newBlob, blobName); // FileSaver.js
});

我已尽一切努力让 v10 工作，任何帮助将不胜感激。

谢谢，

【问题讨论】：

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

【解决方案1】：

你需要通过 await blobBody 来获取 body。

downloadBlobResponse = await blobURL.download(azblob.Aborter.none, 0);

// data is a browser Blob type
const data = await downloadBlobResponse.blobBody;

【讨论】：

我对您的回答投了赞成票，但是，我得到了这个愚蠢的回应...“感谢您的反馈！声望低于 15 的人的投票已记录，但不要更改公开显示的发布分数。”

【解决方案2】：

谢谢Xiaoning Liu！

我仍在学习异步 javascript 函数和 Promise。猜猜我只是错过了另一个“等待”。我看到“downloadBlobResponse.blobBody”是一个承诺，也是一个 blob 类型，但是，我不明白为什么它不会转换为一个新的 blob。我不断收到“Iterator getter is not callable”错误。

这是我的最终工作解决方案：

// Create a BlobURL
const blobURL = azblob.BlobURL.fromContainerURL(containerURL, blobName);

// Download blob
downloadBlobResponse = await blobURL.download(azblob.Aborter.none, 0);

// In browsers, get downloaded data by accessing downloadBlockBlobResponse.blobBody
const data = await downloadBlobResponse.blobBody;

// Saves file to the user's downloads directory
saveAs(data, blobName); // FileSaver.js

【讨论】：

错误“Iterator getter is not callable”从何而来？
我在尝试将 blobURL.download 响应转换为新的 blob 对象时遇到该错误。 var newBlob = new Blob(downloadBlobResponse.blobBody); 添加 await 关键字后，我意识到甚至不需要创建新的 blob。再次感谢！

【解决方案3】：

感谢 Mike Coop 和刘晓宁！

我正忙着制作一个 Vuejs 插件来从存储帐户下载 blob。谢谢你，我能够完成这项工作。

var FileSaver = require('file-saver');
const { BlobServiceClient } = require("@azure/storage-blob");
const downloadButton = document.getElementById("download-button");

const downloadFiles = async() => {
    try {
        if (fileList.selectedOptions.length > 0) {
            reportStatus("Downloading files...");
            for await (const option of fileList.selectedOptions) {
                var blobName = option.text;
                const account = '<account name>';
                const sas = '<blob sas token>';
                const containerName = '< container name>';
                const blobServiceClient = new BlobServiceClient(`https://${account}.blob.core.windows.net${sas}`);
                const containerClient = blobServiceClient.getContainerClient(containerName);
                const blobClient = containerClient.getBlobClient(blobName);
                const downloadBlockBlobResponse = await blobClient.download(blobName, 0, undefined);
                const data = await downloadBlockBlobResponse.blobBody;
                // Saves file to the user's downloads directory
                FileSaver.saveAs(data, blobName); // FileSaver.js
            }
            reportStatus("Done.");
            listFiles();
        } else {
            reportStatus("No files selected.");
        }
    } catch (error) {
        reportStatus(error.message);
    }
};

downloadButton.addEventListener("click", downloadFiles);

【讨论】：