如何在一个闪亮的应用程序中使用loader渲染js对象

bis0qfac 于 2022-12-30 发布在其他

关注(0)|答案(1)|浏览(129)

这是this的后续问题
在这个应用程序中，我们使用一个按钮来截图。这需要一段时间，所以我想实现一个加载程序到应用程序。这样做没有js代码对我来说不是问题，但我不能让它与js代码一起工作。
下面是一个最小的工作示例：点击Export to pdf按钮后，应该会显示一个加载器。我尝试了shinycssloaders，但没有成功：

library(shiny)
library(shinyWidgets)

js <- "
    function Export(){
      var $img = $('#img');
      var width = $img.width();
      var height = $img.height();
      domtoimage.toPng($('html')[0])
        .then(function (blob) {
          var pdf = new jsPDF('p', 'mm', 'a4');
          var imgProps = pdf.getImageProperties(blob);
          var pdfWidth = pdf.internal.pageSize.width;
          var pdfHeight = pdf.internal.pageSize.height;
          var widthRatio = pdfWidth / width;
          var heightRatio = pdfHeight / height;
          var ratio = Math.min(widthRatio, heightRatio);
          var w = imgProps.width * ratio;
          var h = imgProps.height * ratio;
          pdf.addImage(blob, 'PNG', 0, 0, w, h);
          pdf.save('allPage.pdf');
        });
    }
    "

ui <- fluidPage(
  tags$head(
    tags$script(src = "https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"),
    tags$script(src = "https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"),
    tags$script(HTML(js))
  ),
  
  #background image
  tags$img(id = "img",
           src = "http://upload.wikimedia.org/wikipedia/commons/5/5d/AaronEckhart10TIFF.jpg",
           style = 'position: absolute; width: 1250px; height: 880px;'),
  
  div(
    id = "container1",
    style = "position: absolute; left: 30px; top: 170px; display: inline-block; vertical-align: middle; width: 300px;",
    
    actionButton("export", "Export to PDF",
                 onclick = "Export();")
  )
  
)

server <- function(input, output, session) {
  
}

shinyApp(ui, server)

r

来源：https://stackoverflow.com/questions/74948433/how-to-render-a-js-object-with-loader-in-a-shiny-app

1条答案

按热度按时间

g52tjvyc1#

您可以设置输入值via javascript from the client。因此，您可以通过在UI javascript部分中放置以下行来切换输入变量（例如'busyWithPDF'）的状态0和1：

js <- "
    function Export(){
      Shiny.setInputValue('busyWithPDF', 1)
      // code to prepare PDF
      // ...
      // pdf.save('allPage.pdf');
      Shiny.setInputValue('busyWithPDF', 0)
    }
    "

并使用这个输入值，例如显示/隐藏一个条件面板（你可以用一个无限输入加载器来装饰它）

shiny::conditionalPanel(condition = 'input.busyWithPDF',
                            div(class = 'well well-info',
                                h1('preparing PDF')
                            )
                            )

赞(0）回复(0）举报 2022-12-30

我来回答

如何在一个闪亮的应用程序中使用loader渲染js对象

1条答案

相关问题

热门标签

最新问答