Django+Vue强制下载异常：文件无法解压、文件名不正确

我来帮你梳理下问题根源和解决方案，你遇到的这两个问题其实都和Axios的默认响应处理逻辑有关：

问题核心原因 #

1. 文件损坏无法解压：Axios默认会把响应数据当作文本/JSON来解析，这会直接破坏压缩包这类二进制文件的原始字节结构，导致下载后的文件损坏无法正常解压。
2. 文件名显示错误：前端硬编码文件名虽然能临时解决，但如果后端返回的文件名有变动，或者需要从响应头获取准确的文件名，硬编码的方式就不够可靠了。

具体解决方案 #

1. 配置Axios正确处理二进制数据 #

在Axios请求中添加responseType: 'blob'，告诉Axios不要解析响应内容，直接保留原始的二进制Blob数据：

export function packMaterials (context, thesisId, filename) { 
  context.$axios({ 
    method: 'get', 
    headers: getAuthHeader(), 
    url: PACK_URL + thesisId,
    responseType: 'blob' // 关键配置：指定响应为二进制Blob类型
  }) 
  .then(function (response) { 
    console.log(response)
    // 此时response.data已经是Blob类型，无需手动转换
    let link = document.createElement('a') 
    link.href = window.URL.createObjectURL(response.data) 
    
    // 推荐：从后端响应头中提取文件名，替代硬编码
    const contentDisposition = response.headers['content-disposition']
    if (contentDisposition) {
      // 正则匹配Content-Disposition中的文件名
      const match = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/)
      if (match && match[1]) {
        const extractedFilename = decodeURIComponent(match[1].replace(/['"]/g, ''))
        link.download = extractedFilename
      } else {
        link.download = filename //  fallback到传入的文件名
      }
    } else {
      link.download = filename
    }
    
    link.click()
    // 释放URL对象，避免浏览器内存泄漏
    window.URL.revokeObjectURL(link.href)
  }) 
  .catch(function (error) { 
    console.log(error) 
  }) 
}

2. 后端Django的优化建议（可选） #

虽然直接访问API没问题，但可以把content_type调整为压缩包对应的标准MIME类型，比如ZIP包用application/zip，这样更规范：

if os.path.exists(file_path): 
  # 返回file 
  with open(file_path, 'rb') as fh: 
    # 根据实际文件类型设置content_type，比如ZIP包用application/zip
    response = HttpResponse(fh.read(), content_type="application/zip") 
    response['Content-Disposition'] = "attachment; filename={}".format(escape_uri_path(filename)) 
    return response

关键说明 #

• responseType: 'blob'是解决文件损坏的核心，它让Axios直接保留原始二进制数据，不会进行文本解析操作。
• 从Content-Disposition响应头提取文件名的方式，能保证前端获取的文件名和后端返回的完全一致，避免硬编码带来的不一致问题。
• 调用window.URL.revokeObjectURL可以释放创建的URL对象，防止浏览器内存泄漏。

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