Django + Axios 文件下载在Firefox中无法正常工作的问题排查

遇到这种跨浏览器的下载问题，大概率是Firefox对HTTP头和DOM操作的处理更严格导致的，结合你的代码，我整理了几个关键的修复点，应该能解决问题：

1. 修正Django端的Content-Disposition格式 #

Firefox对Content-Disposition头的文件名解析遵循更严格的RFC规范，你的代码里没有给文件名加双引号，这可能导致Firefox无法正确识别文件名，进而中断下载流程。

修改Django视图中的响应头：

# 原代码
# response['Content-Disposition'] = 'attachment; filename=' + 'yourpaper.docx'
# 修改后
response['Content-Disposition'] = 'attachment; filename="yourpaper.docx"'

2. 调整前端Blob的MIME类型 #

你当前使用的application/force-download是一个非标准的MIME类型，Firefox对这类强制类型的处理和Chrome/Safari不同。换成docx文件的官方标准MIME类型application/vnd.openxmlformats-officedocument.wordprocessingml.document，能让浏览器更准确地识别文件类型。

3. 确保动态创建的a标签被添加到DOM #

Firefox对未插入DOM树的动态a标签，click()事件可能不会被正确触发。需要先把创建的a标签添加到页面中，触发点击后再移除。

4. 清理URL对象避免内存泄漏（同时辅助修复下载问题） #

下载完成后记得释放URL.createObjectURL创建的对象，这不仅是最佳实践，也能避免Firefox因资源占用问题导致的异常。

修改后的完整前端代码 #

axios({
  method:'post',
  url:'/api/downloadDoc',
  responseType:'blob',
  data: params,
})
.then(response => {
  // 使用docx官方MIME类型
  const blob = new Blob([response.data], {
    type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
  })
  const link = document.createElement('a')
  const url = window.URL.createObjectURL(blob)
  
  link.href = url
  link.download = "YourPaper.docx"
  // 将链接插入DOM
  document.body.appendChild(link)
  // 触发下载
  link.click()
  // 清理资源
  document.body.removeChild(link)
  window.URL.revokeObjectURL(url)
})
.catch(e => {
  console.log(e)
})

额外排查点 #

如果上述修改后还是不行，可以检查：

• Firefox的下载设置，是否开启了“阻止自动下载”的选项
• 浏览器扩展是否拦截了下载请求（比如广告拦截器、隐私类扩展）

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