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

DavidHolly
December 7, 2021
164 views
0 votes
2 Answers

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.

Tags: html magento

Answers

- MaikLowrey
- December 7, 2021 at 9:49 am
- 0 votes
0
Short answer. What you want is not possible with an single HTML link only.
I can think of the following alternative possibilities without Javascript:
1. Multiple links
2. 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>
Login or Signup to reply.

- TreasureUvietobore
- December 7, 2021 at 9:53 am
- 0 votes
0
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>
```
Login or Signup to reply.