Python FastAPI如何实现HTML页面动态插入后端生成的表格

<img> 是HTML原生支持通过src属性自动发起GET请求拉取资源并渲染的标签，但<table>标签没有内置的src资源拉取逻辑，无法直接照搬图片标签的写法。另外你示例里的img标签把src错写成了scr，拼写错误会导致图片加载失败，需要注意。

下面给两种可直接运行的实现方案，按需选择即可。

方案1：服务端直出渲染（最易上手） #

不需要单独拆分表格接口，直接在返回主页面时把pandas生成的表格HTML拼接进页面即可，不需要额外写前端逻辑，适合初学者。

from fastapi import FastAPI
from fastapi.responses import HTMLResponse
import pandas as pd

app = FastAPI()

# 原有图片接口逻辑保持不变
@app.get("/create_image")
def create_image():
    # 自行实现图片生成、返回逻辑
    pass

@app.get("/", response_class=HTMLResponse)
def main_page():
    # 生成表格内容
    df = pd.DataFrame({"col1": [1, 2], "col2": [3, 4]})
    table_content = df.to_html()
    # 拼接完整页面返回
    page = f"""
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>测试页面</title>
        </head>
        <body>
            <p>生成的图片：</p>
            <img src="/create_image" alt="生成的图片">
            <p>生成的表格：</p>
            {table_content}
        </body>
    </html>
    """
    return page

方案2：单独接口动态加载（和你最初的拆分思路完全匹配） #

如果需要把表格生成逻辑单独拆成/create_table接口，页面加载后再拉取表格内容插入，只需要补一小段JavaScript逻辑完成请求和DOM插入即可——因为table本身不会自动发请求拉取内容。
首先调整Python端的表格接口：

from fastapi.responses import HTMLResponse
import pandas as pd

@app.get("/create_table", response_class=HTMLResponse)
def create_table():
    df = pd.DataFrame({"col1": [1, 2], "col2": [3, 4]})
    # df.to_html()会直接返回完整的<table>标签字符串，可直接渲染
    return df.to_html()

HTML端不需要写错误的<table src="xxx">写法，只需要预留表格容器，加少量JS完成拉取插入：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>测试页面</title>
</head>
<body>
    <p>生成的图片：</p>
    <img src="/create_image" alt="生成的图片">
    <p>生成的表格：</p>
    <!-- 预留表格容器 -->
    <div id="table-wrap"></div>

    <script>
        // 页面加载完成后拉取表格
        document.addEventListener('DOMContentLoaded', async () => {
            const resp = await fetch('/create_table');
            const tableHtml = await resp.text();
            // 把返回的表格HTML插入容器
            document.getElementById('table-wrap').innerHTML = tableHtml;
        })
    </script>
</body>
</html>

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