如何导出dashbio图表？寻求除截图外的保存方案

以下是几种可行的非截图式保存Dash Bio图表的方案，覆盖不同类型的组件：

1. 利用Plotly原生下载按钮（适用于基于Plotly Figure的组件） #

大部分Dash Bio组件（如Clustergram、ManhattanPlot、VolcanoPlot等）本质是封装了Plotly Figure，可通过配置组件的figure参数开启内置下载功能：

from dash import Dash, html
import dash_bio as dashbio

app = Dash(__name__)

# 以Clustergram为例
clustergram_data = dashbio.load_data("clustergram")
clustergram = dashbio.Clustergram(
    data=clustergram_data,
    figure={
        "config": {
            "displayModeBar": True,
            "modeBarButtonsToAdd": ["download"]  # 添加下载按钮
        }
    }
)

app.layout = html.Div([clustergram])

if __name__ == "__main__":
    app.run_server(debug=True)

开启后，图表右上角的模式栏会出现下载按钮，支持导出PNG、SVG、JSON等多种格式。

2. 通过Dash回调手动导出图像 #

对于可获取figure属性的组件，可通过回调结合Plotly的图像导出能力实现自定义下载：

from dash import Dash, html, Input, Output, State, dcc
import dash_bio as dashbio
import plotly.io as pio

app = Dash(__name__)

app.layout = html.Div([
    dashbio.ManhattanPlot(
        id="manhattan-plot",
        dataframe=dashbio.load_data("manhattan")
    ),
    html.Button("下载图表", id="download-btn"),
    dcc.Download(id="download-output")
])

@app.callback(
    Output("download-output", "data"),
    Input("download-btn", "n_clicks"),
    State("manhattan-plot", "figure"),
    prevent_initial_call=True
)
def download_plot(n_clicks, fig):
    # 将Figure转换为PNG字节流
    img_bytes = pio.to_image(fig, format="png")
    # 返回可下载对象
    return dcc.send_bytes(img_bytes, "manhattan_plot.png")

if __name__ == "__main__":
    app.run_server(debug=True)

这种方式支持自定义下载触发逻辑，还可替换format参数为svg、jpeg等格式。

3. 前端JS导出（适用于无figure暴露的组件） #

部分Dash Bio组件（如SequenceViewer、Circos等）未直接暴露Plotly Figure，可通过前端JavaScript操作DOM元素导出图像：

from dash import Dash, html, dash_bio

app = Dash(__name__)

app.layout = html.Div([
    dash_bio.SequenceViewer(
        id="seq-viewer",
        sequence="ATGCATGCATGCATGC"
    ),
    html.Button("导出SVG", id="export-svg-btn"),
    html.Script("""
        document.getElementById('export-svg-btn').addEventListener('click', () => {
            const svgEl = document.querySelector('#seq-viewer svg');
            if (!svgEl) return;
            
            // 序列化SVG内容
            const svgData = new XMLSerializer().serializeToString(svgEl);
            const blob = new Blob([svgData], { type: 'image/svg+xml' });
            const downloadUrl = URL.createObjectURL(blob);
            
            // 创建下载链接并触发点击
            const a = document.createElement('a');
            a.href = downloadUrl;
            a.download = 'sequence_viewer.svg';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(downloadUrl);
        });
    """)
])

if __name__ == "__main__":
    app.run_server(debug=True)

该方法适合基于SVG渲染的组件，可直接导出原生SVG格式文件。

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