本文详解如何在 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 文件双击即可在任意浏览器中打开，保留所有缩放、悬停、图例交互功能。