Download multiple liles from Azure Blob URL list o

问题:

I am trying to create a simple download utility for Azure blob in my website. As of now, I have following design.

Basically a list of all the files in a datatable and a button to download. On click of this button, I am able to get a list of URLs for all the corresponding blobs.

To download them all, currently I am zipping those files and downloading in one shot. With this approach, problem is that I need to bring all the files into browser memory, and then zip them. So, technically, all the download is happening before zipping process can begin. I don't want to strain the browser trying to zip GBs of data unnecessarily, or trying to keep that much data in RAM.

Right now, I am trying to figure out if I can somehow make the browser download all the files using the URLs, instead of downloading them to browser memory first.

I have tried directly looping through the URLs, but I always end up with just the last file downloaded. Plus, the images are always opened directly instead of getting downloaded.

Below is the code that I tried for looping.

function downloadAll(urls) {
  var link = document.createElement('a');

  link.setAttribute('download', null);
  link.style.display = 'none';

  document.body.appendChild(link);

  for (var i = 0; i < urls.length; i++) {
    link.setAttribute('href', urls[i]);
    link.click();
  }

  document.body.removeChild(link);
}

This code always downloads the last file.

So, I am stuck with either downloading all files in memory and then zipping them, or only allow single file download. Is there any other approach that I can try? Maybe opening hidden tabs in the page?