How can I download a group of files with a element use javascript?

Question

consider the following code:

I have a button on the page that when I click it, it will download the images.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test Download</title>
</head>

<body>
    <button onclick="handleDownload()">download</button>

    <script> 
        // Assume these urls are valid and can been downloaded in the 
           same domain
        var urls = ['url1', 'url2', 'url3'];

        function handleDownload() {
            for (var url of urls) {
                var a = document.createElement('a');
                a.setAttribute('href', url);
                a.setAttribute('download', '-');
                a.click();
            }
        }
    </script>
</body>

</html>

The question is when I click the download button, it send all request but just download one image, so I don't know what's the problem.

Is the a.click() execute too fast or other cause?

No, it downloads all files. At least on chrome on osx - the download popup pops up just once though — baao, May 23 '18 at 09:38
Possible duplicate of https://stackoverflow.com/questions/13950974/how-to-force-allow-the-user-to-download-multiple-files-client-side — Nicolas Cami, May 23 '18 at 09:59

score 0 · Answer 1 · answered May 23 '18 at 10:09

0

var links = [
  'https://s3.amazonaws.com/Minecraft.Download/launcher/Minecraft.exe',
  'https://s3.amazonaws.com/Minecraft.Download/launcher/Minecraft.dmg',
  'https://s3.amazonaws.com/Minecraft.Download/launcher/Minecraft.jar'
];

function handleDownload(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);
}

<button onclick="handleDownload(window.links)">Test me!</button>

answered May 23 '18 at 10:09

Sudhi

81
3

But this demo just downloads the last file in the array when I click the 'Test me' button, it's one not three – Duke May 23 '18 at 10:26
In the case you can use zip.js (http://gildas-lormeau.github.io/zip.js/) and also refer here (https://davidwalsh.name/javascript-zip) – Sudhi May 23 '18 at 10:44
I have tested that if I list the three link on the page, if I click these link very quickly one by one, it just download the last file too. – Duke May 25 '18 at 02:15
If I execute the `link.click()` like below, it works as expected ``` function startDownload(urls) { for (let i = 0; i < urls.length; i++) { setTimeout(() => { let element = document.getElementById('link_' + i); element.click(); }, 2000 * (i + 1)); } } ``` – Duke May 25 '18 at 03:15

score 0 · Accepted Answer · answered May 26 '18 at 02:58

As I described above, I wanted to download some pictures with it's urls.But it failed because it can't send a request before the previous request didn't connected to the server. So I have commented that if I click these links too fast, it also download the last one.

Finally, I use window.open(url) to get it done instead of use the way shown on the top;

How can I download a group of files with a element use javascript?

2 Answers2