使用Python Flask框架提交表单后无法下载运行时生成的CSV文件

架构老林

2026-10-5

CSV下载无触发问题修复方案

常见原因及对应修复方法

1. 前端提交方式不符合要求

如果使用AJAX/fetch异步提交POST请求，浏览器默认不会自动触发下载行为，仅同步提交、主动Blob处理两种场景会触发下载，可二选一修复：

改用原生表单同步提交，前端代码示例：

<form method="POST" action="/你的接口路由">
  <input name="todo" type="text">
  <button type="submit">提交并下载</button>
</form>

保留异步提交的话，前端主动处理返回的Blob流，示例：

fetch('/你的接口路由', {
  method: 'POST',
  body: new FormData(document.querySelector('form'))
})
.then(res => res.blob())
.then(blob => {
  const downloadUrl = window.URL.createObjectURL(blob)
  const aTag = document.createElement('a')
  aTag.href = downloadUrl
  aTag.download = 'mycsv.csv'
  document.body.appendChild(aTag)
  aTag.click()
  window.URL.revokeObjectURL(downloadUrl)
  aTag.remove()
})

2. 后端响应头设置不规范

可以补充字符集声明提升兼容性，调整后的后端代码如下：

if request.method == "POST":
    todo = request.form.get("todo")
    if todo is not None:
        captions = todo.split("&")
        for caption in captions:
            caption = caption.split("=")[0]
            caption = caption.replace("+", " ")
            print(caption)
    csv_content = 'foo,bar,baz\nhai,bai,crai\nfoo,bar,baz\nhai,bai,crai\n'  
    response = make_response(csv_content)
    response.headers['Content-Disposition'] = 'attachment; filename=mycsv.csv'
    response.headers['Content-Type'] = 'text/csv; charset=utf-8'
    return response