How to Download multiple files from javascript

Question

I am trying to use window.location.href in a loop to download multiple files

I have a table in which i can select file's, then i run a loop of selected and try navigate to the file path to download the files.

I keep only getting the last file to download.

I think it's due to the location herf only taking action after my javascript finishes and not as the code runs.

When i have a break point on the window.location.herf it still only downloads the last file and only when i let the code run through.

Is there a better way to initiate multiple downloads from a javascript loop.

---

$("#btnDownload").click(function () {
  var table = $('#DocuTable').DataTable();
  var rows_selected = table.rows('.selected').data();
  $.each(rows_selected, function (i, v) {
    window.location.href = v.FilePath;
  });
});

Solution 1

In some browsers (at least Google Chrome) support the follow:

$("<a download/>").attr("href", "https://code.jquery.com/jquery-3.1.0.min.js").get(0).click();
$("<a download/>").attr("href", "https://code.jquery.com/jquery-3.1.0.min.js").get(0).click();
$("<a download/>").attr("href", "https://code.jquery.com/jquery-3.1.0.min.js").get(0).click();

JSFiddle: https://jsfiddle.net/padk08zc/

Solution 2

I would make use of iframes and a script to force the download of the files as Joe Enos and cmizzi have suggested.

The answer here will help with JavaScript for opening multiple iframes for each file: Download multiple files with a single action

The answers for popular languages will help with forcing downloads if the URL is actually something that can be served correctly over the web:

• PHP: How to force file download with PHP
• .Net: Force download of a file on web server - ASP .NET C#
• NodeJS: Download a file from NodeJS Server using Express
• Ruby: Force browser to download file instead of opening it

Ensure you change the links to point to your download script and also make sure you add the appropriate security checks. You wouldn't want to allow anyone to abuse your script.

Comments

[cmizzi]

HTML doesn't support multiple files to download at once. You can create a GZIP of files in order to get one file to download or you can create one iframe per file in your page in order to download all of them

[R. Chappell]

You don't need to create multiple iframe elements, when you can use window.open(url);

[cmizzi]

Hum... You're true ! :)

[Joe Enos]

@R.Chappell Opening multiple windows like that, even self-closing ones, may trigger popup blockers. Iframes are the way to go here.

[Joe Enos]

@cmizzi When you say creating a GZIP file, I'd avoid that, and use traditional Zip instead, so all users can easily unzip it.

[R. Chappell]

@Joe Enos This is better than the files being linked to, from opening in hidden iframes if the header types are not right. We can't assume to know that these files are all being managed correctly. An example would be linking to images.

[cmizzi]

@JoeEnos If anyone can extract ZIP files (on Windows perhaps), you can also easily uncompress GZIP IMHA. I always prefer GZIP for transfer protocol, but feel free to use ZIP :)

[Joe Enos]

@R.Chappell Good point, if you're opening the actual content URL. In something like this, I would expect to build the links as something like downloadFile.aspx?file=somefile.txt where the server is responsible for properly building those response headers - but if it's not like that, then iframes wouldn't work.

[Joe Enos]

@cmizzi Windows (at least 7, I don't have 10 in front of me) doesn't have a built-in GZip extractor integrated into Windows Explorer. I use 7-zip personally, but I don't expect everyone to have something like that.

[Zay Lau]

By the compatibility I means downloading multi-file at the same time, I am not sure if other browsers allowed this feature because the security risk. Anyway, thanks for the site!