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

Posted 2023-02-24

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

【英文标题】：Is possible HTML download Attribute can download multiple file without using javascript?

【发布时间】：2022-01-12 08:12:08

【问题描述】：

我在不使用 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 版本中添加下载多图像功能。

【问题讨论】：

你为什么不想使用 Javascript？

请添加解释或文档链接，以阐明 download 属性在 Magento 中的作用？

为什么我不使用 Javascript，因为我在 Magento 1.7 版本中添加下载多图像功能。我不明白你的意思。

【参考方案1】：

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

多个链接 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>

【讨论】：

我想在同一个按钮中有多个链接

你有想法吗？

在我看来，这只能通过 Javascript 实现。

你能展示用javascript下载多个的简单方法吗？

好的。我先试试。谢谢。

【参考方案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>

【讨论】：

不能下载文件就可以打开了吧？