Dash/Flask应用动态生成文件下载失效问题解决问询

我来帮你搞定这个问题——你的下载按钮点击后跳首页，核心原因是没有正确配置Dash的静态文件访问规则，直接用本地文件路径作为URI是行不通的，Dash默认不会把自定义目录下的文件暴露给前端访问。下面是具体的调整方案：

关键调整步骤 #

• 配置静态文件目录：在初始化Dash应用时，指定存放下载文件的目录为静态资源目录，并定义前端访问的URL前缀：

  app = dash.Dash(
      __name__,
      external_stylesheets=stylesheets,
      static_folder="downloadable",  # 指向你的下载文件存放目录
      static_url_path="/downloads"   # 前端访问该目录的URL前缀
  )
  

• 生成正确的访问URI：回调里不能直接用本地文件路径，要构造符合Dash静态资源规则的URL：

  uri = f"{app.static_url_path}/{filename}"
  

• 确保下载目录存在：避免写文件时因为目录不存在报错，在代码开头添加目录创建逻辑：

  import os
  # 自动创建downloadable目录（如果不存在）
  os.makedirs("downloadable", exist_ok=True)
  

修正后的完整代码 #

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import uuid
import os

stylesheets = [
    "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css",  # Bulma
]

# 确保downloadable目录存在
os.makedirs("downloadable", exist_ok=True)

# create app
app = dash.Dash(
    __name__,
    external_stylesheets=stylesheets,
    static_folder="downloadable",
    static_url_path="/downloads"
)

app.layout = html.Div(
    className="section",
    children=[
        dcc.Textarea(
            id="text-area",
            className="textarea",
            placeholder='Enter a value...',
            style={'width': '300px'}
        ),
        html.Button(
            id="enter-button",
            className="button is-large is-outlined",
            children=["enter"]
        ),
        html.Div(
            id="download-area",
            className="block",
            children=[]
        )
    ]
)

def build_download_button(uri):
    """Generates a download button for the resource"""
    button = html.Form(
        action=uri,
        method="get",
        children=[
            html.Button(
                className="button",
                type="submit",
                children=[
                    "download"
                ]
            )
        ]
    )
    return button

@app.callback(
    Output("download-area", "children"),
    [ Input("enter-button", "n_clicks") ],
    [ State("text-area", "value") ]
)
def show_download_button(n_clicks, text):
    if not n_clicks or not text:  # 处理初始点击为None或文本为空的情况
        return []
    # turn text area content into file
    filename = f"{uuid.uuid1()}.txt"
    path = f"downloadable/{filename}"
    with open(path, "w") as file:
        file.write(text)
    # 生成正确的静态资源URL
    uri = f"{app.static_url_path}/{filename}"
    return [build_download_button(uri)]

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

补充说明 #

原来的代码中，你直接用本地路径downloadable/xxx.txt作为Form的action，Dash默认不会识别这个路径，因为它不在Dash默认的静态资源服务范围内（默认只有assets目录），所以前端访问时Dash会返回404，进而跳转到首页。通过配置static_folder和static_url_path，我们告诉Dash要把downloadable目录下的文件作为静态资源提供，这样生成的URI就能被正确解析，点击下载按钮就能触发文件下载了。

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