从浏览器按顺序从 Azure Blob 存储下载文件

Question

背景简介：我有一个将文件存储在 Azure Blob 存储中的 Web 服务。该服务的用户可以一次下载多个文件。如果正在下载的所有文件的总文件大小相对较小，那么我将文件压缩到我的服务器上并返回该 ZIP 文件 - 在这里没问题。

场景：例如，如果用户想要下载 3 个每个 1GB 的文件，我将这些文件下载到服务器是不现实的，将它们压缩，然后将 ZIP 文件返回到浏览器。因此，对于这些场景，我将 Azure Blob 存储 URL 返回到浏览器，并让用户直接从 Azure Blob 存储下载文件，以免对我的服务器造成压力。

问题：目前，浏览器只接收所有这些 URL 并一次下载它们。我需要一种顺序下载这些文件的方法。因此，浏览器会收到一个 Blob 存储 URL 列表并一次下载一个。但是，我不知道如何在浏览器上检测一次下载何时完成，以便可以开始另一次下载。

欢迎任何关于我应该如何处理这个问题的建议/建议。

编辑：我的前端收到下载 ID 列表并开始下载

for(var i = 0; i < listOfDownloads.length; i++) {

    //Go direct to Azure blob storage for each ID in list of IDs
    //This immediately begins a download direct from blob storage
    window.location.href = {azure blob storage URL};

    //Find way of detecting when download complete so can move on to next

}

Answer 1

你可以试试jquery.fileDownload 库和Promise:

function downloadFilesSequantially(listOfDownloads) {

    function downloadComplete(link) {
      return new Promise(function(res, rej) {
        $.fileDownload(link)
          .done(function() {
            res(0);
          })
          .fail(function() {
            rej(0);
          });
      })     
    }

    listOfDownloads.reduce(function(prev, next) {
      return prev.then(downloadComplete(next));
    }, Promise.resolve(0))
}

您还应该修改此库，因为它需要特定的 cookie 作为响应，由于直接链接到 blob，您无法提供（if 的语句条件已被替换）：

if (true/*document.cookie.indexOf(settings.cookieName + "=" + settings.cookieValue) != -1*/) {

    //execute specified callback
    internalCallbacks.onSuccess(fileUrl);

    //remove the cookie and iframe
    document.cookie = settings.cookieName + "=; expires=" + new Date(1000).toUTCString() + "; path=" + settings.cookiePath;

    cleanUp(false);

    return;
}