在Blazor WASM中如何使用a标签下载文件且不修改当前页面URL

问题成因 #

点击原生<a>标签触发下载时，浏览器会先执行指向href地址的导航逻辑，再触发下载行为。如果服务端Content-Disposition响应头解析存在延迟，或是页面存在全局路由/点击事件拦截逻辑，就会出现地址栏URL临时变更为文件路径、末尾多余问号的情况。

解决方案 #

方案一：原生标签优化 #

给现有<a>标签补充属性，规避全局事件干扰：

<a href="@FileLink()" download="@FileName" target="_self" rel="noreferrer" onclick="event.stopPropagation();">@FileName</a>

方案二：JS动态触发下载（更稳定，全程不修改当前页面URL） #

通过JS动态创建临时<a>标签触发下载，完全避免当前页面触发导航行为：

<!-- 原有a标签修改为触发JS方法 -->
<a href="javascript:void(0)" onclick="downloadTemplate()">@FileName</a>

<script>
function downloadTemplate() {
  const downloadLink = document.createElement('a');
  downloadLink.href = '@FileLink()';
  downloadLink.download = '@FileName';
  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);
}
</script>

服务端配置校验 #

如果调整后问题仍然存在，可检查文件接口的响应配置：

• 确保返回头包含Content-Disposition: attachment; filename="对应文件名"
• 不要返回3xx重定向响应，直接返回二进制文件流即可

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