Dash 数据表通过弹出窗口保存到 excel 或 csv

Question

是否可以使用标准弹出窗口在本地保存破折号数据表？在哪里可以选择位置、文件名等？

谢谢！

Answer 1

我不确定是否可以使用默认表导出机制（通过设置

export_format

参数启用）来实现所需的行为，但可以使用

Download

中的

dash-extensions==0.0.28

组件来完成。这是后者的一个小例子，

import dash
import dash_html_components as html
import pandas as pd

from dash.dependencies import Output, Input, State
from dash_extensions import Download
from dash_table import DataTable
from dash_extensions.snippets import send_data_frame

dt = DataTable(columns=[{"id": v, "name": v} for v in range(5)], data=[{v: v * 10 for v in range(5)}], id="table")
app = dash.Dash(prevent_initial_callbacks=True)
app.layout = html.Div([dt, html.Button("Download", id="btn"), Download(id="download")])


@app.callback(Output("download", "data"), [Input("btn", "n_clicks")], [State("table", "data")])
def download_table(n_clicks, data):
    df = pd.DataFrame.from_records(data)
    return send_data_frame(df.to_csv, "some_data.csv", index=False)


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

编辑：根据 Dash 1.20.0，

Download

组件已合并到

dash-core-components

。因此，可以在不使用任何第三方库的情况下重写上面的示例，

import dash
import dash_html_components as html
import dash_core_components as dcc
import pandas as pd
from dash.dependencies import Output, Input, State
from dash_table import DataTable

dt = DataTable(columns=[{"id": v, "name": v} for v in range(5)], data=[{v: v * 10 for v in range(5)}], id="table")
app = dash.Dash(prevent_initial_callbacks=True)
app.layout = html.Div([dt, html.Button("Download", id="btn"), dcc.Download(id="download")])

@app.callback(Output("download", "data"), [Input("btn", "n_clicks")], [State("table", "data")])
def download_table(n_clicks, data):
    df = pd.DataFrame.from_records(data)
    return dcc.send_data_frame(df.to_csv, "some_data.csv", index=False)

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

Answer 2

有点晚了，但我发现的一个解决方案可以是使用

clientside_callback

和

showSaveFilePicker

这样的 JavaScript 函数，我从 dcc.Store 下载一些数据到

json

文件：

clientside_callback(
    """
    async function(data) {
        if (!data) {
            return dash_clientside.no_update;
        }
        try {
            const fileHandle = await window.showSaveFilePicker({
                suggestedName: 'data.json',
                types: [{
                    description: 'JSON file',
                    accept: {
                        'application/json': ['.json'],
                    },
                }],
            });
            const writableStream = await fileHandle.createWritable();
            await writableStream.write(data);
            await writableStream.close();
            return true;
        } catch (error) {
            console.log('error: ', error);
            return dash_clientside.no_update;
        }
    }
""",
    Output("dummy", "children"), # the callback doesn't return anything so a dummy output is used.
    Input("data_store", "data"), # data from the dcc.Store
)