The title might not be explicit enough, so let me explain my problem: I have a list of links displayed on my page, pointing to audio files. Clicking each one of those will prompt the browser to download the targeted file.
What I would like to have is a <button> at the bottom that would download every link of the list.
Here is my code:
const downloadAll = () => {
const allLinks = document.querySelectorAll('a');
for (i=0; i< allLinks.length; i++) {
allLinks[i].click();
}
}<a href="https://link1">Download</a>
<a href="https://link2">Download</a>
<a href="https://link3">Download</a>
<button onclick="downloadAll()">download all</button>When the user clicks on <button> only the last one is downloaded.
I have searched a lot and tried different options but I couldn't find a working one. I think the download part is the issue.
try adding target="_blank" to your links like so
<a href="https://link1" target="_blank">Download</a>
<a href="https://link2" target="_blank">Download</a>
<a href="https://link3" target="_blank">Download</a>
this will tell browser to process every link in a separate tab. Tabs might be blocked by the browser though, so pay attention to top right corner(in chrome) there may be notification regarding blocked popups.
Here is the link to an article that shows some other ways using different libs. https://medium.com/twodigits/multi-file-download-using-javascript-9b0b8a14639b
Use download attribute to assign filename to each a tag
that will trigger mulltiple download in browser
const downloadAll = () => {
const allLinks = document.querySelectorAll('a');
for (i=0; i<= allLinks.length; i++) {
var each = allLinks[i]
each.download = each.href
each.click()
}
}