点击href时阻止新页面打开，fnExportExcel导出Excel时e.preventDefault()失效

我之前也碰到过一模一样的情况，大概率是事件默认行为没被正确拦截，或者按钮本身的属性设置有问题，给你几个实用的解决思路：

1. 确保事件对象被正确传递并拦截默认行为 #

如果你的按钮用的是内联onclick绑定函数，一定要把事件对象传进函数里，并且第一时间阻止默认行为：

<!-- 按钮示例（button或a标签都适用） -->
<button onclick="fnExportExcel(event)">导出Excel</button>
<!-- 或者a标签写法 -->
<a href="#" onclick="fnExportExcel(event)">导出Excel</a>

然后在你的fnExportExcel函数里优先处理事件：

function fnExportExcel(e) {
  // 先拦截默认行为，防止跳转
  e.preventDefault();
  e.stopPropagation(); // 可选，避免事件冒泡触发其他逻辑

  // 你的导出核心逻辑
  const table = document.getElementById('target-table');
  const tableHtml = table.outerHTML;
  const blob = new Blob([tableHtml], { type: 'application/vnd.ms-excel' });
  const downloadUrl = URL.createObjectURL(blob);
  
  // 创建临时下载链接
  const tempLink = document.createElement('a');
  tempLink.href = downloadUrl;
  tempLink.download = '表格导出结果.xls'; // 必须设置download属性，否则会跳转
  tempLink.style.display = 'none';
  
  document.body.appendChild(tempLink);
  tempLink.click();
  document.body.removeChild(tempLink);
  URL.revokeObjectURL(downloadUrl); // 释放资源
}

2. 表单内的按钮要加type="button" #

如果你的按钮放在<form>标签里，默认的button元素类型是submit，点击会触发表单提交——如果form的action为空或者无效，就会跳转到404页面。这时候给按钮加上type="button"就能解决：

<form>
  <button type="button" onclick="fnExportExcel(event)">导出Excel</button>
</form>

3. 改用事件监听绑定（更稳定） #

内联事件有时候会有上下文或者事件传递的坑，改用addEventListener绑定事件更靠谱：

<button id="export-btn">导出Excel</button>

document.getElementById('export-btn').addEventListener('click', function(e) {
  e.preventDefault();
  // 直接在这里写导出逻辑，或者调用你的fnExportExcel
  fnExportExcel();
});

function fnExportExcel() {
  // 导出逻辑...
}

4. 检查导出函数里的临时链接处理 #

如果你的导出逻辑是动态创建<a>标签触发下载，一定要确保给它设置了download属性，并且用完就移除，避免残留的元素干扰页面行为。

试试上面的方法，应该就能解决新页面打开404的问题了。

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