Flask实现Excel文件下载失败：浏览器未触发下载请求问题

核心问题 #

你的后端代码逻辑本身没问题，但前端使用了AJAX/fetch这类异步请求发送JSON格式的POST数据（从request.get_json()可以判断），这类请求的响应不会被浏览器自动触发下载——浏览器只会把响应数据返回给JS，不会自动处理Content-Disposition: attachment头。

解决方法 #

方法一：前端修改（推荐，无需改动后端） #

在前端JS中手动处理响应的Blob数据，创建下载链接触发浏览器下载：

用fetch实现：

fetch('/', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(yourInputData) // 替换成你的实际数据
})
.then(response => response.blob())
.then(blob => {
  const downloadUrl = window.URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = downloadUrl;
  link.download = 'rules.xlsx';
  document.body.appendChild(link);
  link.click();
  // 清理资源
  window.URL.revokeObjectURL(downloadUrl);
  document.body.removeChild(link);
});

用axios实现：

axios.post('/', yourInputData, { responseType: 'blob' })
.then(response => {
  const blob = new Blob([response.data], { 
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
  });
  const downloadUrl = window.URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = downloadUrl;
  link.download = 'rules.xlsx';
  document.body.appendChild(link);
  link.click();
  window.URL.revokeObjectURL(downloadUrl);
  document.body.removeChild(link);
});

方法二：后端修改（改用表单提交） #

如果不想改动前端JS，可以把前端提交改成普通表单提交，让浏览器自动处理下载响应：

前端表单示例：

<form method="POST" action="/">
  <input type="hidden" name="input_data" id="input_data">
  <button type="submit">Export</button>
</form>
<script>
// 提交前把JSON数据转成字符串存入隐藏字段
document.querySelector('button').addEventListener('click', () => {
  document.getElementById('input_data').value = JSON.stringify(yourInputData);
});
</script>

后端对应修改：

@app.route("/", methods=['GET', 'POST'])
def home():
    if request.method == 'POST':
        # 从表单字段获取数据并解析
        parsed_input = parse_input_data(json.loads(request.form.get('input_data')))
        export_df = export_rules(parsed_input)
        session['export_completed'] = True
        
        excel_buffer = BytesIO()
        export_df.to_excel(excel_buffer, index=False)
        excel_buffer.seek(0)
        
        return send_file(excel_buffer,
                         as_attachment=True,
                         download_name='rules.xlsx',
                         mimetype='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')
    return render_template('home.html',
                           netact_release_options = retrive_releases(),
                           netact_size_options = [],
                           ne_roles_options = [])

额外排查点 #

1. 验证Excel数据是否有效：在后端把excel_buffer的内容保存到本地文件，确认文件能正常打开：

   with open('test.xlsx', 'wb') as f:
       f.write(excel_buffer.getvalue())
   

2. 检查Flask版本：如果是旧版本，send_file的download_name参数可能需要换成attachment_filename。

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