引言：控制 Streamlit UI 元素
streamlit 是一个强大的 python 库，用于快速构建数据应用。随着版本的迭代，st.dataframe 组件引入了一个便捷的新特性：在数据框上方显示一个下载按钮，允许用户直接将数据导出为 csv 或其他格式。然而，在某些场景下，开发者可能不希望用户拥有此下载权限，例如出于数据安全、界面简洁性或特定业务流程的考虑。本文将探讨如何通过注入自定义 css 来隐藏这个下载按钮。
核心方法：注入自定义 CSS
Streamlit 允许开发者通过 st.markdown 函数注入自定义的 HTML 和 CSS 代码。这为我们提供了极大的灵活性，可以对 Streamlit 应用的默认样式和行为进行微调。要隐藏 st.dataframe 的下载按钮，我们需要定位到包含该按钮的元素，并将其 display 属性设置为 none。
通过检查 Streamlit 应用的 HTML 结构，我们可以发现 st.dataframe 上方的工具栏（包含下载按钮）通常由一个 data-testid="stElementToolbar" 的元素表示。因此，我们可以编写一段 CSS 代码来隐藏这个特定的元素。
import streamlit as st
import pandas as pd
# 示例数据
data = {
'列A': [1, 2, 3, 4],
'列B': ['苹果', '香蕉', '橙子', '葡萄'],
'列C': [True, False, True, False]
}
df = pd.DataFrame(data)
st.title("Streamlit st.dataframe 下载按钮隐藏示例")
st.write("以下是包含下载按钮的 st.dataframe：")
st.dataframe(df)
st.write("以下是隐藏下载按钮的 st.dataframe：")
# 隐藏 st.dataframe 工具栏（包含下载按钮）的 CSS 样式
st.markdown(
"""
<style>
[data-testid="stElementToolbar"] {
display: none;
}
</style>
""",
unsafe_allow_html=True
)
st.dataframe(df)
st.write("请注意，第二个数据框上方的下载按钮已不可见。")在上述代码中：
- 我们首先创建了一个示例 DataFrame。
- 第一个 st.dataframe(df) 展示了默认情况下带有下载按钮的数据框。
- 关键在于 st.markdown 代码块。我们使用 unsafe_allow_html=True 参数来允许 Streamlit 渲染包含 HTML/CSS 的字符串。
- CSS 选择器 [data-testid="stElementToolbar"] 精确地定位到了 st.dataframe 上方的工具栏。
- display: none; 属性则负责将该工具栏从页面上完全移除。
注意事项
unsafe_allow_html=True 的安全性： 使用 unsafe_allow_html=True 意味着 Streamlit 将直接渲染您提供的 HTML/CSS 代码，而不进行任何净化。虽然在注入 CSS 样式以隐藏特定元素时通常是安全的，但如果引入了用户输入的恶意 HTML/JavaScript，则可能存在跨站脚本攻击 (XSS) 的风险。请确保您注入的代码是可信的。
data-testid 的稳定性： data-testid 属性是 Streamlit 内部用于测试的标识符。虽然它们在当前版本中是可靠的，但理论上 Streamlit 的未来版本可能会更改这些内部标识符。如果未来发现此方法不再有效，您可能需要检查 Streamlit 元素的最新 data-testid 或其他可用的 CSS 选择器。
隐藏范围： 请注意，[data-testid="stElementToolbar"] 选择器会隐藏整个工具栏，而不仅仅是下载按钮。如果 Streamlit 未来在该工具栏中添加了其他功能按钮，它们也将一并被隐藏。当前版本中，该工具栏主要包含下载功能。
代码位置： 将 st.markdown 代码放置在 st.dataframe 组件之前或之后通常都可以生效，因为 CSS 样式是全局应用的。然而，为了代码的可读性和管理性，建议将其放置在您希望影响的 st.dataframe 组件附近，或者在一个集中的样式管理部分。
总结
通过简单地注入一行自定义 CSS 代码，我们能够有效地隐藏 Streamlit st.dataframe 组件自带的数据下载按钮。这种方法为开发者提供了对应用界面更精细的控制，有助于满足特定的业务需求、提升用户体验或增强数据安全性。在实施此方案时，请务必留意 unsafe_allow_html=True 的使用以及 data-testid 的潜在版本兼容性问题。掌握这种 UI 定制技巧，将使您能够构建更加专业和符合需求 Streamlit 应用。
