Blazor应用下载wwwroot文件异常：超115KB文件仅下载115KB无法打开

核心问题 #

你的代码存在两个致命错误，直接导致大文件下载异常：

1. 前端JS未正确使用文件路径：triggerFileDownload函数里硬编码了anchorElement.href = '/'，完全忽略了传入的url参数，实际下载的是网站根目录的HTML页面（大小刚好约115KB），而非目标文件。
2. 后台传递错误的路径类型：你传给前端的fileURL是服务器本地的物理路径（environment.WebRootPath），前端浏览器无法直接访问服务器本地文件系统的路径，必须使用Web可访问的URL路径。

修复步骤 #

1. 修正后台代码，生成正确的Web访问路径

假设你的文件存储在wwwroot下的attachments子目录中（如果直接在wwwroot根目录，路径就是/${fileName}），修改DownloadFileFromURL方法：

@code {
private async Task DownloadFileFromURL()
{
    // 拼接Web可访问的文件路径（示例：/attachments/xxx.pdf）
    var fileWebPath = $"/attachments/{tblTicket.AttchedFileName}";
    await JS.InvokeVoidAsync("triggerFileDownload", tblTicket.AttchedFileName, fileWebPath);
}
}

2. 修正前端JS函数，正确使用传入的URL

修改<script>里的函数，把anchorElement.href设置为传入的url参数：

<script>
    window.triggerFileDownload = (fileName, url) => {
      const anchorElement = document.createElement('a');
      anchorElement.href = url; // 使用传入的文件Web路径
      anchorElement.download = fileName ?? '';
      anchorElement.click();
      anchorElement.remove();
    }
</script>

额外注意事项 #

• 确保文件确实存在于wwwroot/attachments（或你指定的对应目录）中，文件名与数据库存储的完全一致（注意大小写）。
• 如果文件需要权限验证（比如仅登录用户可下载），不能直接用静态文件路径，需要创建一个API接口，通过接口读取文件流并返回给前端，示例接口逻辑：

[HttpGet("download/{ticketId}")]
public async Task<IActionResult> DownloadTicketFile(int ticketId)
{
    // 根据ticketId从数据库获取文件名
    var ticket = await _dbContext.Tbl_Tickets.FirstOrDefaultAsync(t => t.ticket_Id == ticketId);
    if (ticket == null) return NotFound();
    
    var filePath = Path.Combine(_webHostEnvironment.WebRootPath, "attachments", ticket.AttchedFileName);
    if (!System.IO.File.Exists(filePath)) return NotFound();
    
    var fileBytes = await System.IO.File.ReadAllBytesAsync(filePath);
    return File(fileBytes, "application/octet-stream", ticket.AttchedFileName);
}

此时前端JS的url就是这个API的地址，比如/api/download/{ticketId}。

内容的提问来源于stack exchange，提问作者Ibrahim-Amer