ASP.NET MVC中PWA应用文件下载失效问题及替代方案咨询

问题现状 #

在ASP.NET MVC集成PWA后，使用<a>标签的download属性实现文件下载时功能失效：点击链接后打开新视图，地址栏显示控制器、动作及文件ID，网络面板能看到文件响应但无法触发下载；相同逻辑在普通HTML视图中可正常工作。

当前前端代码：

<a download href="@Url.Action("DownloadDoc","Ajax" ,new { id = item.Id})" target="_blank" class="btn-20 btn border-green-dark color-green-dark bi bi-arrow-down" />

后端控制器代码：

public ActionResult DownloadDoc(int id) {
  var q = from temp in db.CustomerScannedDocuments where temp.Id == id select temp.Attachment;
  var type = from t in db.CustomerScannedDocuments where t.Id == id select t.File_Name;
  string fileType = type.First().ToString();
  string ext = Path.GetExtension(fileType);
  byte[] cover = q.First();
  if (cover != null) {
    if (ext == ".pdf") {
      return File(cover, "application/pdf");
    } else {
      return File(cover, "image/jpg");
    }

  } else {
    return null;
  }

}

可行解决方式 #

1. 优化后端返回，指定下载文件名 #

当前后端返回FileResult时未指定下载文件名，浏览器无法明确是要下载还是预览文件，这是PWA环境下失效的核心原因之一。修改后端代码：

• 合并数据库查询，避免重复查询提升性能
• 返回File时添加第三个参数（文件名）

修改后的后端代码：

public ActionResult DownloadDoc(int id) {
    var doc = db.CustomerScannedDocuments.FirstOrDefault(temp => temp.Id == id);
    if (doc?.Attachment == null)
    {
        return null;
    }

    string ext = Path.GetExtension(doc.File_Name);
    string mimeType = ext == ".pdf" ? "application/pdf" : "image/jpeg";
    // 指定文件名，浏览器会触发下载而非预览
    return File(doc.Attachment, mimeType, doc.File_Name);
}

2. 前端改用JavaScript触发下载（绕过Service Worker拦截） #

PWA的Service Worker可能会拦截<a>标签的请求，导致download属性失效。改用JavaScript通过fetch获取文件Blob，再手动触发下载：

修改前端代码：

<button onclick="downloadFile(@item.Id)" class="btn-20 btn border-green-dark color-green-dark bi bi-arrow-down"></button>

<script>
async function downloadFile(id) {
    try {
        const response = await fetch('@Url.Action("DownloadDoc","Ajax")?id=' + id);
        if (!response.ok) throw new Error('请求失败');
        
        const blob = await response.blob();
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        // 从响应头获取文件名，或直接指定
        const fileName = response.headers.get('Content-Disposition')?.split('filename=')[1] || 'document';
        a.download = fileName;
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(url);
        document.body.removeChild(a);
    } catch (err) {
        console.error('下载失败:', err);
    }
}
</script>

3. 配置Service Worker排除下载请求 #

如果项目中使用了Service Worker，需要确保它不拦截下载相关的请求，让请求直接走网络。在Service Worker的fetch事件中添加判断：

self.addEventListener('fetch', (event) => {
    const url = new URL(event.request.url);
    // 排除DownloadDoc动作的请求
    if (url.pathname.includes('/Ajax/DownloadDoc')) {
        event.respondWith(fetch(event.request));
        return;
    }
    // 其他缓存逻辑...
});

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