Plotly Dash實作下載下傳功能

文章目錄

• • • 1. 問題背景
    • 2. 解決方案
    • • 2.1 解決思路
      • 2.2 例子實戰
      • Reference

1. 問題背景

在使用Dash架構實作可視化工具時，使用者回報希望可以下載下傳裡面的可視化表格為excel、csv等格式，網上簡單搜尋後，在這裡記錄下解決方案。

2. 解決方案

2.1 解決思路

在查閱資料的時候得到以下資訊——

1. 通常的下載下傳功能是在後端（flask等）實作傳送檔案的邏輯，前端通過http接口請求檔案即可
2. Dash是基于Flask和React的web架構，可以很友善地嵌入flask應用

基于這兩點資訊，提供簡單的解決思路——

1. 将現有的Dash應用嵌入Flask應用（在初始化dash的時候指定flask server即可，按官網教程一分鐘搞定！）
2. flask實作傳送檔案邏輯，提供HTTP接口
3. 在Dash中通過超連結等形式，在前端顯示下載下傳入口，點選後調用上述檔案下載下傳接口

2.2 例子實戰

1.将現有的Dash應用嵌入Flask應用，這裡的嵌入是指我們的Dash應用成為Flask應用的一個頁面，如下在初始化Dash App的時候指定server和路徑即可。

import flask
import dash
import dash_html_components as html

server = flask.Flask(__name__)

@server.route('/')
def index():
    return 'Hello Flask app'

app = dash.Dash(
    __name__,
    server=server,
    routes_pathname_prefix='/dash/'
)

app.layout = html.Div("My Dash app")

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

2.實作傳送檔案邏輯，flask的實作方式有多種，可參考flask下載下傳檔案，此處示範使用最簡單的一種，如下，當調用該GET接口時，發送本地路徑下的

test.csv

檔案

@server.route('/download', methods=['GET'])
def download():
    return send_from_directory('.', 'test.csv',as_attachment=True)
           

3.在Dash中通過超連結等形式，在前端顯示下載下傳入口，同樣采用最簡單的方式，如下

app.layout = html.Div([
    #其他代碼
    html.A("下載下傳", href='http://127.0.0.1:8050/download', target="_blank"),
    #其他代碼
)
           

這樣即可實作檔案下載下傳的功能拉~

Reference

1. Integrating Dash with Existing Web Apps
2. flask下載下傳檔案