如何在PyScript中导出Panel Tabulator组件为CSV文件

为什么浏览器里点击按钮没反应？ #

• Jupyter Notebook运行在本地Python环境中，直接拥有读写本地磁盘的权限，所以to_csv能直接生成文件到本地。
• 但PyScript是在浏览器的沙箱环境里运行的，这是浏览器的核心安全机制——禁止网页直接操作本地文件系统。你调用to_csv('filename.csv')时，文件其实是生成在了WebAssembly（Wasm）的虚拟文件系统里，根本没写入用户本地磁盘，所以看不到任何反应。

为什么Tabulator的下载功能能生效？ #

Tabulator的下载逻辑是基于浏览器原生API实现的：它把表格数据转换成Blob对象，再生成一个下载链接，触发浏览器的下载弹窗——这属于用户主动触发的操作，完全符合浏览器的安全规则，因此能正常保存文件到本地。

用PyScript实现CSV导出的正确方式 #

不用依赖Tabulator的话，你可以在PyScript里调用浏览器的JavaScript API来实现，核心是通过浏览器主动弹出下载框完成保存：

import js
from pyodide.ffi import create_proxy
import pandas as pd
import panel as pn

# 初始化示例数据和Panel组件
df = pd.DataFrame({"列1": [1,2,3], "列2": ["a","b","c"]})
tabulator = pn.widgets.Tabulator(df)
filename_input = pn.widgets.TextInput(value="数据.csv", placeholder="输入保存文件名")
save_button = pn.widgets.Button(name="保存CSV")

def save_csv(event):
    # 获取用户输入的文件名，默认用"数据.csv"
    filename = filename_input.value or "数据.csv"
    # 将DataFrame转为CSV字符串
    csv_str = df.to_csv(index=False)
    # 调用JS创建Blob格式的文件数据
    blob = js.Blob.new([csv_str], {"type": "text/csv;charset=utf-8;"})
    # 生成Blob的临时URL
    url = js.URL.createObjectURL(blob)
    # 创建隐藏的a标签触发下载
    a = js.document.createElement("a")
    a.href = url
    a.download = filename
    js.document.body.appendChild(a)
    a.click()
    # 清理临时资源
    js.document.body.removeChild(a)
    js.URL.revokeObjectURL(url)

# 给按钮绑定点击事件
save_button.on_click = create_proxy(save_csv)

# 布局并渲染组件
pn.Column(tabulator, filename_input, save_button).servable()

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