Flask send_file无法触发浏览器下载弹窗问题排查求助

你用fetch发送POST请求触发下载时，浏览器没有弹出下载提示的核心原因是：Fetch API不会自动触发浏览器的原生下载行为。Fetch仅负责获取响应数据，需要手动处理这些数据来启动下载流程，而你当前的JS代码缺少这一步骤。

对比你测试有效的GET路由方式：当浏览器直接发起GET请求（比如点击<a>标签），后端返回的send_file会带上Content-Disposition响应头，浏览器识别到这是附件后自动弹出下载提示。而Fetch请求的响应不会被浏览器自动处理为下载，必须手动干预。

修改JavaScript代码，在获取到响应后将二进制数据转换为可下载的临时链接，触发浏览器下载：

function download_files(fileid) {
  fetch("/download", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "X-CSRFToken": getCookie("csrf_token") // 启用CSRF保护时必须添加
    },
    body: JSON.stringify({ fileid: fileid }),
  })
  .then(response => {
    // 从响应头提取文件名
    const contentDisposition = response.headers.get('Content-Disposition');
    let filename = fileid.toString();
    if (contentDisposition) {
      const matches = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
      if (matches?.[1]) {
        filename = decodeURIComponent(matches[1].replace(/['"]/g, ''));
      }
    }
    return response.blob().then(blob => ({ blob, filename }));
  })
  .then(({ blob, filename }) => {
    // 创建临时下载链接并触发点击
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    // 清理临时资源
    window.URL.revokeObjectURL(url);
    document.body.removeChild(a);
  })
  .catch(error => console.error('下载失败:', error));
}

// 辅助函数：获取CSRF Token（Flask-WTF启用时需要）
function getCookie(name) {
  const value = "; " + document.cookie;
  const parts = value.split("; " + name + "=");
  if (parts.length === 2) return parts.pop().split(";").shift();
}

后端代码无需修改（send_file已正确设置as_attachment=True），但要注意如果启用了Flask-WTF的CSRF保护，必须在请求头中携带CSRF Token。

你测试的GET路由方式更简单高效，浏览器原生支持下载。只需将下载按钮改为<a>标签，直接指向带文件ID的路由：

修改HTML下载按钮： #

<td>
  <a href="{{ url_for('files.download', upload_id=file.id) }}" class="close" style="text-decoration: none;">
    <i class="bi bi-box-arrow-down" style="color: black;"></i>
  </a>  
</td>

修改后端路由为GET： #

@files.route("/download/<int:upload_id>", methods=["GET"])
@login_required
def download(upload_id):
    file = Upload.query.filter_by(id=upload_id).first()
    if file and file.user_id == current_user.id:
        print(f"file {file.filename} downloaded !")
        return send_file(BytesIO(file.data), download_name=file.filename, as_attachment=True)
    # 处理无权限或文件不存在的情况
    flash("无权限下载该文件或文件不存在", category="error")
    return redirect(url_for("views.drive"))

这种方式无需JavaScript，符合HTTP语义（下载属于资源获取，用GET更合理），且实现简单不易出错。

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