Is possible HTML download Attribute can download multiple file without using javascript?

Question

I have a problem to download multiple file without JavaScript. May I know is possible HTML download Attribute can download multiple file without using JavaScript?

Below is my coding:

<a  href="https://cdn.sstatic.net/Img/teams/teams-illo-free-sidebar-promo.svg?v=47faa659a05e" download><button style="background-color:#ED1C24;color:white" >Article</button></a>

For example, if I want to download these https://cdn.sstatic.net/Img/teams/teams-illo-free-sidebar-promo.svg?v=47faa659a05e and https://dco-assets.everestads.net/iCornerStore/source-images/MICROSOFTSTORE/current/cc1b5d10e9ab7ea9c03e62e1cc6172b6.png. I try to modify like below the code, but it doesn't work.

<a  href="https://cdn.sstatic.net/Img/teams/teams-illo-free-sidebar-promo.svg?v=47faa659a05e,https://dco-assets.everestads.net/iCornerStore/source-images/MICROSOFTSTORE/current/cc1b5d10e9ab7ea9c03e62e1cc6172b6.png" download><button style="background-color:#ED1C24;color:white" >Article</button></a>

Hope someone can guide me on how to solve this problem. Thanks.

*Note: Why I don't using Javascript because I am doing in Magento 1.7 version to add download multiple image function.

Please add an explanation, or a link to the documentation, to clarify what the `download` atrribute does in Magento? — Ingo Steinke, Dec 07 '21 at 09:16
*Why I don't using Javascript because I am doing in Magento 1.7 version to add download multiple image function.* I can't understand your point. — Raptor, Dec 07 '21 at 09:23

Maik Lowrey · Answer 1 · 2021-12-07T09:14:40.500

1

Short answer. What you want is not possible with an single HTML link only. I can think of the following alternative possibilities without Javascript:

Multiple links
ZIP file

If you can't target a zip file, then only with multiple links.

UPDATE (JS Version)

With pure JS it can look like this:

const el = document.getElementById('multiple-dl');

el.addEventListener('click', (event) => {
  event.preventDefault();
  const anchor = event.target;
  const links = anchor.getAttribute('data-dlinks');
  const linkList = links.split(',');
  
  linkList.forEach((link) => {
    console.log(link)
    window.open(link);  
  });  
})

<a href="#" id="multiple-dl" class="" data-dlinks="https://www.links1.com,https://www.links1.com">multiple DLinks</a>

edited Dec 07 '21 at 09:14

answered Dec 07 '21 at 08:49

Maik Lowrey

15,957
6
40
79

I want multiple links in the same button – David Holly Dec 07 '21 at 08:51
Do you have idea? – David Holly Dec 07 '21 at 08:51
In my opinion, this is only possible with Javascript. – Maik Lowrey Dec 07 '21 at 08:53
Ok. I try to use Javascript. Because worry to crash the magento other function – David Holly Dec 07 '21 at 08:59
@DavidHolly this is simple and if i were you i would do it with pure javascript instead of jquery. This way you have one dependency less. Which is always good. Do you know how to do it? – Maik Lowrey Dec 07 '21 at 09:02
1

Can you show simple method to download multiple with javascript? – David Holly Dec 07 '21 at 09:04
@DavidHolly Yes i can show you an example. I updated my Answear with JS version. winodw.open doenst work in StackOverflow. That will throw a error here. – Maik Lowrey Dec 07 '21 at 09:15
1

Ok. I try it first. Thanks. – David Holly Dec 07 '21 at 09:31
@DavidHolly Yes lets try. You can use onclick instead but it would be bad practice. https://stackoverflow.com/questions/5871640/why-is-using-onclick-in-html-a-bad-practice. but if that doesn't bother you, you can also write it in the shorter `onclick="window.open('link1'); window.open('link2');"`variant. – Maik Lowrey Dec 07 '21 at 09:40
May I know your code cannot multiple download,right? – David Holly Dec 09 '21 at 08:21
@DavidHolly It can multiple download. – Maik Lowrey Dec 09 '21 at 09:33
I try your code, cannot work. Is any need plugin or you try to give me full code? – David Holly Dec 09 '21 at 09:37
@DavidHolly No plugin. it s plain javascript. you got error message? – Maik Lowrey Dec 09 '21 at 09:38
https://drive.google.com/file/d/1isBwehmGlWDTN9mQoOmkyM70BGtKPB5j/view?usp=sharing You can watch my video to show. Just can open 1 link and cannot download – David Holly Dec 09 '21 at 09:46
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/239978/discussion-between-maik-lowrey-and-david-holly). – Maik Lowrey Dec 09 '21 at 09:48

Treasure Uvietobore · Answer 2 · 2021-12-07T08:59:53.797

The best way to do this is to have your files zipped and link to that.

Which states the following:

HTML:

<a href="#" class="yourlink">Download</a>

JS:

$('a.yourlink').click(function(e) {
    e.preventDefault();
    window.open('mysite.com/file1');
    window.open('mysite.com/file2');
    window.open('mysite.com/file3');
});

Having said this, I would still go with zipping the file, as this implementation requires JavaScript and can also sometimes be blocked as popups.

Option 2 is to have multiple link to the download button.

HTML:

<a href="#" class="yourlink">Click Here</a>

JS:

$('a.yourlink').click(function(e) {
    e.preventDefault();
    window.open('http://yoururl1.com');
    window.open('http://yoururl2.com');
});

Minimized Code for multiple links in one button:

<a href="http://google.com" 
     onclick="window.open('http://web1.com','','width=700,height=700'); 
               window.open('http://web2.com','','width=700,height=500');"
               >Click Here</a>

Cannot download the file just can open, right? – David Holly Dec 07 '21 at 09:11 — David Holly, Dec 07 '21 at 09:11

Is possible HTML download Attribute can download multiple file without using javascript?

2 Answers2

UPDATE (JS Version)