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

Question

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

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

问题：目前，浏览器只是接收所有这些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

您可以使用promise尝试jQuery.FileDownLoad库：

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(，如果的语句条件被替换），您无法提供这些cookie：

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;
}