Javascript

Question

标题可能不够明确，所以让我解释一下我的问题：我的页面上显示了 link 的列表，指向音频文件。单击其中的每一个都会提示浏览器下载目标文件。

我想要的是底部的 <button>，它会下载列表中的每个 link。

这是我的代码：

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>

当用户单击 <button> 时，仅 下载最后一个 。

我进行了很多搜索并尝试了不同的选项，但找不到有效的选项。我认为 download 部分是问题所在。

Answer 1

尝试像这样将 target="_blank" 添加到您的 link

<a href="https://link1" target="_blank">Download</a>
<a href="https://link2" target="_blank">Download</a>
<a href="https://link3" target="_blank">Download</a>

这将告诉浏览器在单独的选项卡中处理每个 link。选项卡可能会被浏览器阻止，因此请注意右上角（在 chrome 中）可能会有关于被阻止的弹出窗口的通知。

这是一篇文章的 link，其中展示了使用不同库的其他一些方法。 https://medium.com/twodigits/multi-file-download-using-javascript-9b0b8a14639b

Answer 2

使用下载属性为每个 a 标签分配文件名这将在浏览器中触发多次下载

const downloadAll = () => {
  const allLinks = document.querySelectorAll('a');

  for (i=0; i<= allLinks.length; i++) {
    var each = allLinks[i]
    each.download = each.href
    each.click()
  }
}

Javascript - 一键下载多个链接

Javascript - Download multiple links in one click

download