如何使用jQuery/JavaScript实现点击按钮触发项目同目录文件下载

以下方案均适配你当前的按钮结构，文件放在项目同目录的场景直接可用，优先提供jQuery写法，同时附原生JS和更简便的纯HTML实现。

纯HTML实现（兼容性最优，推荐优先使用） #

无需编写任何JavaScript逻辑，直接为按钮包裹a标签，添加HTML5标准的download属性即可：

<a href="./目标文件名.文件后缀" download="下载到本地时的默认文件名.文件后缀">
  <button type="button" class="btn btn-success">Download</button>
</a>

*注意：如果不加download属性，对于txt、pdf、图片、视频这类浏览器可直接预览的文件，点击后会在当前页/新标签页打开文件，不会触发下载。

jQuery实现 #

先确保页面已引入jQuery库文件，再通过事件绑定实现点击下载逻辑：

<script>
// 为对应按钮绑定点击事件
$('.btn.btn-success').on('click', function() {
  // 动态创建临时a标签
  const tempLink = $('<a>');
  // 配置同目录下的目标文件路径
  tempLink.attr('href', './目标文件名.文件后缀');
  // 配置下载到本地的默认文件名，不配置则使用源文件名称
  tempLink.attr('download', '下载到本地时的默认文件名.文件后缀');
  // 触发临时链接点击，完成后移除临时标签
  tempLink[0].click();
  tempLink.remove();
})
</script>

原生JavaScript实现 #

无需引入jQuery，逻辑与jQuery版本一致：

<script>
// 选中目标按钮绑定点击事件
document.querySelector('.btn.btn-success').addEventListener('click', function() {
  const tempLink = document.createElement('a');
  tempLink.href = './目标文件名.文件后缀';
  tempLink.download = '下载到本地时的默认文件名.文件后缀';
  // 直接触发点击即可，现代浏览器无需将临时标签插入页面DOM
  tempLink.click();
})
</script>

• 浏览器触发文件下载的核心逻辑，就是用户点击指向目标资源的、带download属性的a标签。JS版本的实现本质是动态创建临时a标签模拟用户点击，和手动点击页面上写好的a链接效果完全一致。
• download属性存在同源限制：仅对和当前页面同域名、同协议、同端口的资源生效，跨域资源使用该属性会失效，浏览器会按默认规则处理（跳转或预览）。你的文件存放在项目同目录，完全符合同源要求，可以正常使用。
• 对于zip、exe、rar等浏览器无法直接解析运行的文件类型，即使不加download属性，浏览器也会默认触发下载；download属性的核心作用是强制浏览器下载可预览类文件，同时支持自定义本地保存的文件名。
• 不推荐使用window.open('文件路径')的方式实现下载，该方法会被多数浏览器的弹窗拦截机制拦截，且无法自定义下载文件名，体验较差。

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