使用Django结合GCP实现文件下载到客户端时无法本地保存问题求助

你遇到的文件不自动保存到本地的核心原因是：通过axios发起的AJAX请求，浏览器默认不会处理响应头的Content-Disposition: attachment配置触发下载行为，返回的文件内容会暂存在JS内存中，需要额外手动处理。同时你提供的后端代码存在逻辑疏漏，也需要同步优化。

你当前的后端逻辑没有将GCP存储的Blob内容写入本地临时文件就直接读取返回，仅当本地temp目录存在同名文件时才能正常返回内容，属于不稳定实现。推荐直接返回GCP文件流，省去本地磁盘IO开销：

import mimetypes
from django.conf import settings
from django.http import HttpResponse
from google.cloud import storage
from .models import Model # 替换为你自己的模型类名

def download(request, pk):
    # 获取GCP存储的文件路径，直接取字段值比调用__dict__更规范
    file_gcp_path = Model.objects.get(id=pk).file1
    storage_client = storage.Client()
    bucket = storage_client.get_bucket(settings.GS_MEDIA_BUCKET_NAME)
    blob = bucket.blob(file_gcp_path)

    filename = file_gcp_path.rsplit("/", 1)[1]
    # 直接读取GCP文件字节流返回，无需存储本地临时文件
    file_content = blob.download_as_bytes()
    mime_type, _ = mimetypes.guess_type(filename)

    response = HttpResponse(file_content, content_type=mime_type)
    # 若文件名包含中文，需要自行做URL编码避免乱码
    response["Content-Disposition"] = f"attachment; filename={filename}"
    return response

如果你的Django服务配置了跨域，需要在跨域配置中添加如下配置，允许前端读取Content-Disposition响应头：

# settings.py
CORS_EXPOSE_HEADERS = ['Content-Disposition']

方案1：修改axios请求逻辑（适用需要自定义请求参数、权限校验的场景） #

axios请求必须添加responseType: 'blob'配置，否则返回的二进制内容会被转成字符串导致文件损坏，收到响应后手动模拟下载动作：

axios.get('/api/models/download/26/', {
  responseType: 'blob' // 必加配置
}).then(res => {
  // 从响应头提取后端返回的文件名，也可以自行指定
  let filename = 'default.jpg'
  const disposition = res.headers['content-disposition']
  if (disposition) {
    const nameMatch = disposition.match(/filename=([^;]+)/)
    if (nameMatch?.[1]) filename = decodeURI(nameMatch[1])
  }
  // 生成Blob对象和临时下载链接
  const blob = new Blob([res.data])
  const downloadUrl = window.URL.createObjectURL(blob)
  const tempLink = document.createElement('a')
  tempLink.href = downloadUrl
  tempLink.download = filename
  // 触发下载并清理临时资源
  document.body.appendChild(tempLink)
  tempLink.click()
  document.body.removeChild(tempLink)
  window.URL.revokeObjectURL(downloadUrl)
})

方案2：直接用a标签触发下载（适用无复杂前置逻辑的场景） #

不需要写JS逻辑，直接在页面插入a标签，浏览器会自动处理下载行为，更简单高效：

<a href="/api/models/download/26/" download>点击下载文件</a>

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