使用弹出窗口将Dash数据表保存到excel或csv

Question

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

谢谢！

Answer 1

我不确定是否可以使用默认的表导出机制(通过设置export_format参数启用(来实现所需的行为，但可以使用dash-extensions==0.0.28中的Download组件来实现。下面是后者的一个小例子，

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和类似的showSaveFilePickerjavascript函数，从dcc下载一些数据。存储到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
)