如何在Streamlit中创建复制文本到剪贴板的原生样式按钮？

可以直接通过Streamlit内置API实现，不需要引入第三方组件，完全保留原生按钮的样式和使用习惯，具体实现如下：

最简实现示例 #

import streamlit as st

# 定义需要复制的文本
target_text = "需要复制到剪贴板的内容"

# 用法和原生按钮完全一致
if st.button("点击复制文本"):
    # 可正常添加所有原生按钮点击后的业务逻辑
    st.toast("内容已复制到剪贴板")
    # 注入无高度的HTML执行复制JS
    st.components.v1.html(f"""
        <script>
        navigator.clipboard.writeText(`{target_text}`);
        </script>
    """, height=0)

通用封装版本 #

如果需要多处使用，可以封装成工具函数，自动处理特殊字符转义避免JS报错：

import streamlit as st
import json

def copy_button(label: str, copy_content: str, **kwargs) -> bool:
    """
    带复制功能的Streamlit原生按钮
    :param label: 按钮显示文字
    :param copy_content: 点击后复制到剪贴板的内容
    :param kwargs: 原生st.button的所有参数，比如disabled、use_container_width等
    :return: 按钮是否被点击，和原生st.button返回值一致
    """
    click_state = st.button(label, **kwargs)
    if click_state:
        st.toast("复制成功")
        escaped_content = json.dumps(copy_content)
        st.components.v1.html(f"""
            <script>
            navigator.clipboard.writeText({escaped_content});
            </script>
        """, height=0)
    return click_state

# 调用示例
if copy_button("复制数据", "测试内容，包含特殊字符：\"'\n换行\t制表符", use_container_width=True):
    # 这里可以添加任意点击后的后续逻辑
    st.write("按钮点击后的自定义业务逻辑执行完成")

方案优势 #

• 完全复用Streamlit原生按钮的样式、交互逻辑，无需额外调整CSS
• 用法和原生按钮完全一致，支持所有原生按钮的参数，返回值可直接用于if判断
• 不需要安装任何第三方依赖，仅使用Streamlit内置API
• 支持包含特殊字符、换行、制表符的任意文本内容，自动转义不会出现语法错误

注：该方案依赖浏览器的navigator.clipboard API，所有2018年后发布的主流浏览器均已支持该特性。

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