本文详解如何在 dash 应用中，基于用户交互（如勾选选项）生成 plotly 图表后，点击按钮将其完整导出为可离线查看的 html 文件，解决常见“空白图”或“无法下载”的问题。
在 Dash 中将动态生成的 Plotly 图表导出为 HTML，关键在于：HTML 文件必须在用户触发下载动作时实时生成并提供有效路径，而非在应用启动时预创建空缓冲区。原代码存在三个核心问题：
- buffer 在初始化阶段为空，且未在回调中写入实际图表内容；
- href 属性使用静态 base64 编码，无法响应图表更新；
- n_clicks 输出无法调用 .write_html()（n_clicks 是整数，非 Figure 对象）。
✅ 正确做法是：
- 使用 dcc.Download 组件配合 dcc.send_file() 实现服务端文件下发；
- 在图表更新回调中调用 fig.write_html("filename.html") 保存最新图表；
- 新增独立下载回调，监听按钮点击事件，并返回 dcc.send_file() 响应。
以下是完整、可运行的修复版代码（已适配 Dash 2.0+）：
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=[{'label': '亚洲', 'value': 'Asia'},
{'label': '欧洲', 'value': 'Europe'},
{'label': '美洲', 'value': 'Americas'}],
value=['Asia', 'Europe'],
inline=True
),
html.Br(),
html.Button("? 下载为 HTML", id="download-btn"),
dcc.Download(id="download-component") # 必须声明此组件
])
# 更新图表并同步保存 HTML 文件
@callback(
Output("graph", "figure"),
Input("checklist", "value")
)
def update_line_chart(selected_continents):
filtered_df = df[df["continent"].isin(selected_continents)]
fig = px.scatter(
filtered_df,
x="gdpPercap", y="lifeExp",
size="pop", color="continent",
hover_name="country",
log_x=True, size_max=60,
title="人均 GDP 与预期寿命关系图"
)
# ✅ 关键：每次图表更新后立即写入 HTML 文件
fig.write_html("plotly_graph.html")
return fig
# 触发下载动作
@callback(
Output("download-component", "data"),
Input("download-btn", "n_clicks"),
prevent_initial_call=True
)
def trigger_download(n_clicks):
# ✅ 返回本地生成的 HTML 文件供浏览器下载
return dcc.send_file("plotly_graph.html")
if __name__ == "__main__":
app.run_server(debug=False, port=8051)? 注意事项与最佳实践：
立即学习“前端免费学习笔记（深入）”；
- fig.write_html() 会将完整 Plotly JavaScript 环境打包进单个 HTML 文件，确保离线可交互；
- 文件名（如 "plotly_graph.html"）需保持一致，且路径为服务端可访问的本地路径（不支持绝对路径或跨目录）；
- 若部署在多进程服务器（如 Gunicorn），需改用内存缓存或临时文件策略，避免竞态冲突；
- dcc.Download 组件不可省略——它是 Dash 官方指定的二进制/文件下载通道；
- prevent_initial_call=True 防止页面加载时误触发下载。
通过以上结构，你即可实现「操作 → 渲染 → 一键导出」的完整闭环，导出的 HTML 文件双击即可在任意浏览器中打开，保留所有缩放、悬停、图例交互功能。
