Download multiple files on a page using jQuery

Question

I have a page which has a many links of files to be downloaded individually. I thought it would be a good to have feature to trigger download for all the files with a single click. Here's the script which I wrote to test this-

$('tbody tr a').slice(1).each(function(){  //don't mind the slice().
    console.log('starting download of: ' + $(this).attr('href')); // for debugging.
    $(this).attr('target','_blank'); //  so that a new page is opened for download.
    window.location.href = $(this).attr('href');
})

The problem is that the script only triggers the download of only first download link. However, if I see console, the log is printed for all the files. I think it's happening because of page redirection. Can anyone help me get around this?

@afuous No. I've tried that. This also just logs all the files in console but not starts the download. — Abhishek, Jul 16 '16 at 06:48
@HardikVaghani: I don't understand what do you mean. Can you explain a bit more? — Abhishek, Jul 16 '16 at 06:49
what do you mean by download ? you want to show script or include in page — Hardik Vaghani, Jul 16 '16 at 06:49
what about this? http://stackoverflow.com/questions/16390601/make-multiple-files-to-force-download — Hamboy75, Jul 16 '16 at 06:52
@HardikVaghani: When I click on any of the links, it triggers a file download. I want to start download of all the files without having to click on all the links individually. — Abhishek, Jul 16 '16 at 06:52
@hamboy75: The link you are suggesting is very different from my requirement. — Abhishek, Jul 16 '16 at 06:54
in that question, Miky Dal solution is exactly what you want, multiple downloads on a trigger — Hamboy75, Jul 16 '16 at 06:55
@hamboy75: Firstly, I'm not using PHP. Secondly, I have multiple links on the page, clicking on which downloads a file. I just want to **click** on them with a script. — Abhishek, Jul 16 '16 at 06:58

score 2 · Accepted Answer · answered Jul 16 '16 at 07:14

2

Try substituting download attribute for window.location.href = $(this).attr('href'), call .click() on each <a> element within filtered selector $("tbody tr a").slice(1) at .each() at click of <button> element

var a = $("tbody tr a").slice(1);

$("button").click(function(e) {
  // download `a.txt`, `b.txt`
  a.each(function() {
    this.click()
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>
        <a href="data:text/plain,1" download="1.txt">1</a>
      </td>
    </tr>
    <tr>
      <td>
        <a href="data:text/plain,a" download="a.txt">a</a>
      </td>
    </tr>
    <tr>
      <td>
        <a href="data:text/plain,b" download="b.txt">b</a>
      </td>
    </tr>
  </tbody>
  <!-- click to download `a.txt`, `b.txt` -->
  <button>download all files</button>

answered Jul 16 '16 at 07:14

guest271314

1
15
104
177

This page doesn't have a `download` attribute defined on links. So I added it by iterating and doing `$(this).attr('target','_blank').attr('download',filename);`. But even after this, `.click()` doesn't start the file download. – Abhishek Jul 16 '16 at 07:26
Have you tried `js` at stacksnippets? Did you call `.click()` chained to `$(this).attr('target','_blank').attr('download',filename)`? Try calling `this.click()` on `DOM` element instead of jQuery object. – guest271314 Jul 16 '16 at 07:28
Thanks! the second one, i.e., `this.click()` works. What does this mean though? – Abhishek Jul 16 '16 at 07:44
Wait another thing, this only triggered 6 downloads. What about rest of them? – Abhishek Jul 16 '16 at 07:45
_"Wait another thing, this only triggered 6 downloads. What about rest of them?"_ What do you mean? – guest271314 Jul 16 '16 at 07:47
Got this. There's a setting which limits the maximum number of simultaneous connections to a single server. For my case this is 6 (probably for windows OS). – Abhishek Jul 16 '16 at 07:50
See https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click , http://stackoverflow.com/questions/773639/how-can-i-simulate-an-anchor-click-via-jquery – guest271314 Jul 16 '16 at 08:00

score 0 · Answer 2 · edited May 23 '17 at 11:58

0

You may want to see this answer here:

jquery trigger ctrl + click

Just run on all of your links and trigger ctrl+click in order to open links in new page.

edited May 23 '17 at 11:58

Community

1
1

answered Jul 16 '16 at 07:08

Kosta B.

271
2
12

I've already added `target='_blank'` which essentially has the same effect as **ctrl + click** – Abhishek Jul 16 '16 at 07:15
@Abhishek changing window.location and triggering ctrl+click can't be the same, also if it looks same. – Kosta B. Jul 16 '16 at 10:14

Download multiple files on a page using jQuery

2 Answers2