如何使用JS/jQuery触发页面上基于download属性的多文件下载？

嘿，这个需求我之前做项目的时候刚好碰到过，其实实现起来不难，给你分享几种靠谱的方案，顺便提几个要注意的坑：

先修正一个前提问题 #

首先你示例里的下载链接href="#"是无效的，得把href替换成文件的真实访问URL（比如/static/files/1.txt），不然不管怎么触发都下载不了哦。

方案1：原生JavaScript实现 #

先在页面加一个「全部下载」按钮：

<button id="download-all">全部下载</button>

然后写监听逻辑，核心是逐个触发下载，同时加个小延迟避免被浏览器拦截：

document.getElementById('download-all').addEventListener('click', function() {
  // 获取所有带下载类的链接
  const downloadLinks = document.querySelectorAll('.btn-download');
  
  downloadLinks.forEach((link, index) => {
    // 跳过无效链接
    if (!link.href || link.href === '#') {
      console.warn('跳过无效下载链接:', link);
      return;
    }
    
    // 给每个下载加延迟，避免被浏览器拦截
    setTimeout(() => {
      // 创建临时a标签触发下载（也可以直接触发原链接的click事件）
      const tempLink = document.createElement('a');
      tempLink.href = link.href;
      tempLink.download = link.download;
      tempLink.style.display = 'none';
      document.body.appendChild(tempLink);
      tempLink.click();
      document.body.removeChild(tempLink);
    }, index * 300); // 间隔300ms，可根据浏览器情况调整
  });
});

方案2：jQuery实现 #

如果你项目里用了jQuery，代码可以更简洁一点：

$('#download-all').on('click', function() {
  $('.btn-download').each(function(index) {
    const $link = $(this);
    const fileUrl = $link.attr('href');
    const fileName = $link.attr('download');
    
    // 跳过无效链接
    if (!fileUrl || fileUrl === '#') {
      console.warn('跳过无效下载链接:', $link);
      return;
    }
    
    setTimeout(() => {
      // 创建临时a标签触发下载
      const $tempLink = $('<a>')
        .attr({ href: fileUrl, download: fileName })
        .hide()
        .appendTo('body');
      
      $tempLink[0].click();
      $tempLink.remove();
    }, index * 300);
  });
});

关键注意事项 #

• 浏览器拦截问题：一次性触发多个下载很容易被浏览器判定为恶意行为，加延迟是目前最有效的规避方式，间隔时间建议在200-500ms之间，具体可以根据测试情况调整。
• 跨域文件限制：如果文件是跨域的，仅靠前端download属性可能失效，这时候需要后端配合设置响应头Content-Disposition: attachment; filename="xxx.txt"，强制浏览器触发下载。
• 文件URL有效性：一定要确保href是可直接访问的文件地址，不能是锚点#或者无效链接。

内容的提问来源于stack exchange，提问作者user1947587