Plotly Dash动态图表导出HTML为空问题求助

你的代码存在几个关键问题，导致导出的HTML为空：

1. 静态Href未动态更新：初始时buffer是空的，生成的encoded也是空值，且download组件的href是静态的，不会随图表更新而变化。
2. 回调逻辑错误：第二个回调的输出目标错误（不应是n_clicks），且参数处理、返回值完全不符合需求。
3. Buffer使用不当：未在图表更新后重新写入最新的figure内容到buffer，也未重新编码生成有效的data URI。

修正后的代码 #

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

app = Dash(__name__)

df = tem1  # 你的数据集

app.layout = html.Div([
    html.H4('Test Graph'),
    dcc.Graph(id="graph"),
    dcc.Checklist(
        id="checklist",
        options=['A','B','C'],
        value=['A','B','C'],
        inline=True),
    html.A(
        html.Button("Download as HTML"), 
        id="download",
        href="",  # 初始为空，由回调动态更新
        download="plotly_graph.html"
    )
])

@app.callback(
    Output("graph", "figure"), 
    Input("checklist", "value"))
def update_line_chart(Programs):
    mask = df.Program.isin(Programs)
    fig = px.line(df[mask], 
        x="Month", y="Mood", color='Group', text='Module')
    return fig

@app.callback(
    Output("download", "href"),
    Input("graph", "figure")
)
def update_download_link(figure):
    # 创建新的buffer，避免残留旧内容
    buffer = io.StringIO()
    # 将最新的figure写入buffer
    figure.write_html(buffer)
    # 编码为base64格式
    html_bytes = buffer.getvalue().encode()
    encoded = b64encode(html_bytes).decode()
    # 返回完整的data URI
    return f"data:text/html;base64,{encoded}"

app.run_server(debug=False, port=8051)

关键修正点说明 #

• 动态更新Href：通过回调监听graph的figure变化，每次图表更新时重新生成包含最新图表的base64编码Href。
• 正确的回调目标：将download组件的href作为输出，而非n_clicks，确保点击下载时获取的是最新图表内容。
• Buffer重置：每次生成下载链接时创建新的StringIO对象，避免旧内容干扰，保证写入的是当前最新的figure。
• 参数与返回值修正：回调函数接收figure对象，处理后返回有效的data URI，而非错误的返回值。

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