如何在 shinyscreenshot 中排除 radioGroupButtons

我正在使用 构建一个 Shiny 应用shinyscreenshot。我的应用包含一个“分数”卡，其中有一个 radioGroupButtons 列表，用户可以从中进行选择。radioGroupButtons 在应用中不可见，但是，当我使用 截取屏幕截图时shinyscreenshot，radioGroupButtons 会出现并与数值重叠，导致屏幕截图混乱。

我想在截屏时隐藏 radioGroupButtons。我尝试使用 shinyjs 来切换按钮的可见性，但没有按预期工作。

这是一个最小的可重现示例，演示了我的设置和方法：

library(shiny)
library(bs4Dash)
library(shinyWidgets)
library(shinyjs)
library(shinyscreenshot)

my_ids <- c("region_1", "region_2") 
my_labels <- c("A", "B") 

ui <- bs4DashPage(
  title = "My Example",
  header = bs4DashNavbar(),
  sidebar = bs4DashSidebar(disable = TRUE),  
  body = bs4DashBody(
    useShinyjs(),
    
    # CSS for radio button styles and hiding elements
    tags$style(HTML("
      .btn-zero {background-color: white; color: black;}
      .btn-zero.active {background-color: #a2ff45; color: black;}
      .btn-one {background-color: white; color: black;}
      .btn-one.active {background-color: #a2ff45; color: black;}
      .btn-two {background-color: white; color: black;}
      .btn-two.active {background-color: #a2ff45; color: black;}
      .btn-three {background-color: white; color: black;}
      .btn-three.active {background-color: #a2ff45; color: black;}
      .region-label { line-height: 2.5; }

      /* Hide elements during screenshot */
      .hide-for-screenshot { display: none !important; }
    ")),
    
    bs4Card(
      title = "My Score",
      width = 6,
      style = "height: 200px; overflow: auto;",  
      tags$style(HTML("
        .region-label { margin-top: -10px; }
      ")),
      # Render radio buttons for each region
      lapply(seq_along(my_ids), function(i) {
        fluidRow(
          column(6, h4(class = "region-label", paste(i-1, my_labels[i]))),
          column(6, div(
            style = "display: inline-block;",
            shinyWidgets::radioGroupButtons(
              inputId = my_ids[i],
              label = NULL,
              choices = 0:3,
              selected = 0,
              checkIcon = list(yes = icon("check")),
              status = c("zero", "one", "two", "three"),
              size = 'xs'
            )
          ))
        )
      })
    ),
    
    # Screenshot Button
    actionButton("take_screenshot", "Take Screenshot", style = "margin-top: 10px;")
  )
)

server <- function(input, output, session) {
  observeEvent(input$take_screenshot, {
    # Temporarily hide radio buttons
    shinyjs::addClass(selector = ".radioGroupButtons", class = "hide-for-screenshot")
    
    # Take screenshot and remove the hide class afterward
    shinyscreenshot::screenshot()
    
    # Show radio buttons again
    shinyjs::removeClass(selector = ".radioGroupButtons", class = "hide-for-screenshot")
  })
}

shinyApp(ui, server)

我尝试过的方法 自定义 CSS：我添加了一个.hide-for-screenshotCSS 类 display: none !important; 来隐藏元素。该类在截屏前应用，截屏后删除。

使用shinyjs：我正在使用shinyjs::addClass和shinyjs::removeClass来切换.hide-for-screenshot类radioGroupButtons。

问题 尽管在截屏之前添加了hide-for-screenshot类并隐藏了，但它们仍然出现在屏幕截图中。我怀疑这可能是因为没有遵守临时的 CSS 更改，或者延迟时间不足以应用样式。radioGroupButtonsshinyscreenshot

问题 如何确保截取屏幕截图radioGroupButtons时完全隐藏？shinyscreenshot

任何建议或其他方法都将不胜感激！谢谢。

截图如下：

它看起来应该是这样的：