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下载文件