本文详解如何通过 dash 回调函数将动态生成的 plotly 图表实时导出为本地 html 文件，解决因提前初始化空缓冲区或未正确触发文件写入导致的“下载空白页面”问题。

在 Dash 应用中，将 Plotly 图表导出为独立 HTML 文件是一项常见需求，但直接在布局中预生成 href 链接（如 data:text/html;base64,...）会导致文件内容滞后于图表更新——因为 buffer 在应用启动时即被创建且未随回调刷新，最终下载的是空或过期内容。

正确做法是：分离“生成 HTML”与“触发下载”两个动作，利用 dcc.Download 组件配合 dcc.send_file() 实现服务端文件生成 + 前端一键下载。以下是关键实现要点与完整可运行代码：

✅ 正确实现步骤

1. 移除预定义的 href 和 base64 编码逻辑：避免静态绑定无效链接；
2. 使用 dcc.Download 组件作为下载触发器（需显式声明 id）；
3. 在图表更新回调中同步调用 fig.write_html()，将当前图表保存为本地 HTML 文件；
4. 新增下载回调：监听下载按钮点击（n_clicks），返回 dcc.send_file("plotly_graph.html")，由 Dash 自动处理文件流传输。

✅ 完整修复代码示例

from dash import Dash, dcc, html, Input, Output, callback
import plotly.express as px

app = Dash(__name__)

# 使用内置示例数据（请替换为你的 tem1）
df = px.data.gapminder().query("year == 2007")

app.layout = html.Div([
    html.H4('交互式图表导出示例'),
    dcc.Graph(id="graph"),
    dcc.Checklist(
        id="checklist",
        options=['Asia', 'Europe', 'Americas', 'Africa', 'Oceania'],
        value=['Asia', 'Europe'],
        inline=True
    ),
    html.Button("下载为 HTML", id="download-btn"),
    dcc.Download(id="download-component")  # 关键：声明下载组件
])

# 更新图表并同时保存 HTML 文件
@app.callback(
    Output("graph", "figure"),
    Input("checklist", "value")
)
def update_line_chart(continent_list):
    filtered_df = df[df.continent.isin(continent_list)]
    fig = px.scatter(
        filtered_df, x="gdpPercap", y="lifeExp",
        size="pop", color="continent",
        hover_name="country", log_x=True, size_max=60
    )
    # ✅ 每次图表更新后立即写入 HTML 文件
    fig.write_html("plotly_graph.html")
    return fig

# 响应下载按钮点击，发送最新生成的 HTML 文件
@app.callback(
    Output("download-component", "data"),
    Input("download-btn", "n_clicks"),
    prevent_initial_call=True
)
def trigger_download(n_clicks):
    return dcc.send_file("plotly_graph.html")

if __name__ == "__main__":
    app.run_server(debug=False, port=8051)

⚠️ 注意事项

• fig.write_html() 必须在图表生成回调中执行（而非布局初始化阶段），确保导出的是用户当前看到的最新视图；
• dcc.send_file() 要求文件路径为服务端可访问的相对或绝对路径，推荐使用同级目录下的简洁文件名（如 "plotly_graph.html"）；
• prevent_initial_call=True 防止应用启动时自动触发下载；
• 若需支持多用户并发下载，应为每个会话生成唯一文件名（例如结合 session_id 或时间戳），避免文件覆盖。

通过以上结构化设计，你不仅能稳定导出动态图表，还能轻松扩展为 PDF 导出、批量下载或多格式导出等高级功能。