You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

在Quarto Dashboard中添加剪贴板复制按钮的问题

问题

我希望在Quarto Dashboard中添加一个能复制用户输入或输出内容到剪贴板的按钮,选用了shinyCopy2clipboard工具,但自己编写的代码无法实现复制功能,而该工具的博客示例代码却能正常运行。以下是可复现代码:

---
title: "Test"
format: dashboard
server: shiny
---

## Test

```{r}
library(shiny)
library(shinyCopy2clipboard)
#| title: "Text that needs to copy to clipboard"

# Setup
  use_copy()

  # Text Input 1
  textInput("text", "Enter Your Text")

  # Copy Button 1
shinyCopy2clipboard::CopyButton(
    "copybtn",
    label = "Copy to clipboard",
    icon = icon("copy"),
    text = "No Text Found"
  )
#| context: server
observe({

    req(input$copybtn)
  shinyCopy2clipboard::CopyButtonUpdate(session,
                     id = "copybtn",
                     label = "Copy to clipboard",
                     icon = icon("copy"),
                     text = input$text
    )

  })
---

# 解决方案
问题根源在于Quarto Dashboard的运行环境中,`use_copy()`的加载位置不正确,且server端未正确声明`session`参数。修改后的代码如下:

```yaml
---
title: "Test"
format: dashboard
server: shiny
---

## Test

```{r}
library(shiny)
library(shinyCopy2clipboard)
#| title: "Text that needs to copy to clipboard"
# Text Input 1
textInput("text", "Enter Your Text")

# Copy Button 1
shinyCopy2clipboard::CopyButton(
    "copybtn",
    label = "Copy to clipboard",
    icon = icon("copy"),
    text = "No Text Found"
  )
#| context: server
function(input, output, session) {
  # 移到server端加载复制依赖
  use_copy()
  
  observe({
    req(input$copybtn)
    shinyCopy2clipboard::CopyButtonUpdate(session,
                       id = "copybtn",
                       label = "Copied!",
                       icon = icon("check"),
                       text = input$text
    )
    
    # 2秒后恢复按钮文本
    invalidateLater(2000)
    shinyCopy2clipboard::CopyButtonUpdate(session,
                       id = "copybtn",
                       label = "Copy to clipboard",
                       icon = icon("copy"),
                       text = input$text
    )
  })
}
### 关键改动说明:
1. **调整`use_copy()`位置**:将原本在UI代码块中的`use_copy()`移到server上下文的函数内部,确保复制功能所需的JavaScript代码在服务器端正确注入。
2. **显式声明server函数参数**:Quarto Dashboard中server代码块需要以`function(input, output, session)`的形式定义,确保`session`对象能被正确传递给`CopyButtonUpdate`。
3. **添加按钮状态反馈**:增加了复制成功后按钮文本切换为"Copied!"并在2秒后恢复的逻辑,提升用户体验。

内容的提问来源于stack exchange,提问作者Quinten
相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.15 13:32:16