是否可能 HTML 下载属性可以在不使用 javascript 的情况下下载多个文件？

Question

我在不使用 JavaScript 的情况下下载多个文件时遇到问题。我可以知道HTML下载属性可以在不使用JavaScript的情况下下载多个文件吗？

下面是我的代码：

<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>

例如，如果我想下载这些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。我尝试修改如下代码，但它不起作用。

<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>

希望有人能指导我如何解决这个问题。谢谢。

*注意：为什么我不使用Javascript，因为我是在Magento 1.7 版本中添加下载多图像功能。

Answer 1

简短的回答。仅使用单个 HTML 链接无法实现您想要的。 我可以想到以下没有 Javascript 的替代可能性：

1. 多个链接
2. ZIP 文件

如果您无法定位 zip 文件，则只能使用多个链接。

更新（JS 版本）

使用纯 JS 可以是这样的：

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>

Answer 2

执行此操作的最佳方法是将文件压缩并链接到该文件。

声明如下：

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');
});

话虽如此，我还是会压缩文件，因为这个实现需要 JavaScript，有时也可以作为弹出窗口被阻止。

选项 2 是有多个链接到下载按钮。

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');
});

一键实现多个链接的最小化代码：

<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>