Flask API中实现Pandas DataFrame与上传按钮右对齐布局

我来帮你搞定这个布局问题！要让上传按钮和Pandas生成的DataFrame横向并排（按钮在左，表格在右），核心是用CSS的Flexbox弹性布局来控制元素的排列方式，下面是具体的实现步骤：

1. 修改HTML模板，添加Flex布局容器 #

首先调整你的upload.html，把上传按钮区域和表格区域放在一个Flex容器里，这样就能轻松实现横向对齐：

<!DOCTYPE html>
<html>
<head>
    <title>CR prediction tool</title>
    <style>
        /* 定义Flex容器，实现横向排列 */
        .main-container {
            display: flex;
            align-items: flex-start; /* 让按钮和表格顶部对齐 */
            gap: 30px; /* 按钮与表格之间的间距，可按需调整 */
            padding: 20px;
        }

        /* 给表格添加基础样式，提升可读性 */
        .data-table {
            border-collapse: collapse;
            width: auto;
            border: 1px solid #e0e0e0;
        }
        .data-table th, .data-table td {
            padding: 10px 15px;
            text-align: left;
            border-bottom: 1px solid #e0e0e0;
        }
        .data-table th {
            background-color: #f5f5f5;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="main-container">
        <!-- 上传按钮区域 -->
        <div class="upload-area">
            <h4>上传数据文件</h4>
            <form method="POST" enctype="multipart/form-data" action="{{ url_for('upload_file1') }}">
                <input type="file" name="data_file" accept=".csv, .xlsx">
                <button type="submit" style="margin-left: 10px;">上传并预览</button>
            </form>
        </div>

        <!-- Pandas DataTable显示区域 -->
        <div class="table-area">
            <h4>数据预览</h4>
            <!-- 关键：用safe过滤器渲染HTML表格，避免Flask转义代码 -->
            {{ df_table|safe }}
        </div>
    </div>
</body>
</html>

2. 调整Flask路由（可选，支持文件上传后更新表格） #

如果你的需求是上传文件后才生成对应的DataFrame预览，需要让路由同时支持GET和POST方法，处理文件上传逻辑：

from flask import Flask, render_template, request
import pandas as pd

app = Flask(__name__)

# 初始化默认的预览表格（可选，比如显示示例数据）
default_data = pd.DataFrame({
    '列1': [1,2,3],
    '列2': ['a','b','c']
})

@app.route('/upload', methods=['GET', 'POST'], endpoint='upload_file1')
def upload_file1():
    # 默认显示示例数据
    df_table = default_data.head().to_html(classes='data-table')
    
    if request.method == 'POST':
        # 处理上传的文件
        uploaded_file = request.files.get('data_file')
        if uploaded_file and uploaded_file.filename != '':
            # 根据文件类型读取数据
            if uploaded_file.filename.endswith('.csv'):
                df = pd.read_csv(uploaded_file)
            elif uploaded_file.filename.endswith('.xlsx'):
                df = pd.read_excel(uploaded_file)
            # 生成带样式类的HTML表格
            df_table = df.head().to_html(classes='data-table')
    
    return render_template('upload.html', df_table=df_table)

关键要点说明 #

• Flex布局核心：display: flex让容器内的子元素（上传区和表格区）横向排列，align-items: flex-start确保两者顶部对齐，不会因为表格内容多导致按钮偏移；gap属性用来控制两个元素的间距，比margin更直观。
• safe过滤器：Pandas的to_html()生成的是纯HTML代码，Flask默认会转义HTML标签，必须加上|safe才能正确渲染出表格。
• 表格样式优化：给表格添加data-table类，配合CSS设置边框、内边距等，让DataFrame的显示更美观易读。

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