按钮本身不能下载文件，必须通过javascript的fetch获取blob响应后创建临时a标签并触发click实现下载，且需显式传入filename、处理cors和错误，兼容性方案需降级xmlhttprequest。

按钮点击触发下载，但不跳转页面

直接用 <button></button> 本身不能下载文件，它只是个交互控件。真正触发下载的是 JavaScript 的 fetch + URL.createObjectURL 流程，或者更简单的 @#@#@#@#@#@#@#@#@#@0。但限制明显：

• 仅支持同源 GET 请求；跨域、POST、带认证头（如 JWT）的请求无法用 <a></a> 触发
• download 属性在 Firefox 中对跨域链接无效，Chrome 也要求响应头含 Content-Disposition: attachment
• 样式上 <a></a> 默认带下划线、蓝色，重置成本略高；而 <button></button> 语义更清晰（“执行动作”而非“跳转”）

所以真要严格控制请求方式、头信息、或统一错误提示逻辑，<button></button> + JS 是绕不开的路径。别为了省几行代码牺牲可控性。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

最后提醒：后端接口返回的 Content-Type 必须匹配实际内容（比如 Excel 是 application/vnd.openxmlformats-officedocument.spreadsheetml.sheet），否则部分浏览器可能打不开下载的文件。

<button onclick="downloadFile('/api/export?format=xlsx', 'report.xlsx')">下载 Excel</button>

<script>
function downloadFile(url, filename) {
  fetch(url, { method: 'GET' })
    .then(res => {
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      return res.blob();
    })
    .then(blob => {
      const a = document.createElement('a');
      const urlObj = URL.createObjectURL(blob);
      a.href = urlObj;
      a.download = filename;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(urlObj); // 及时释放内存
    })
    .catch(err => console.error('下载失败:', err.message));
}
</script>

订单 PDF

订单 Excel

<script> document.querySelectorAll('.download-btn').forEach(btn => { btn.addEventListener('click', function() { const url = this.dataset.url; const filename = this.dataset.filename; downloadFile(url, filename); }); }); </script>

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！