闪亮的传单easyPrint插件

Question

我正在尝试将easyPrint插件整合到我的闪亮小册子应用程序中.我想要的是看起来像演示的东西,但有光泽.

我试图模仿这些例子,但都没有成功.

到目前为止,这是我的R代码的代码:

    library(shiny)
    library(shinydashboard)
    library(shinyjs)
    library(htmlwidgets)
    library(htmltools)
    library(leaflet)
    library(leaflet.extras)
    library(sp)

    shinyApp(
  ui = fluidPage(
    leafletOutput("map", height = 750)
  ),
  server = function(input, output) {

    registerPlugin <- function(map, plugin) {
      map$dependencies <- c(map$dependencies, list(plugin))
      map
    }

    easyPrintPlugin <- htmlDependency("leaflet-easyprint", "2.1.8",
                                      src = c(href = "https://github.com/rowanwins/leaflet-easyPrint/blob/gh-pages/dist/"),
                                      script = "index.js")

    # Map
    output$map <- renderLeaflet({
      leaflet() %>%
        addProviderTiles(providers$CartoDB.Positron) %>%
        registerPlugin(easyPrintPlugin) %>%
        onRender("function(el, x) {
                 L.easyPrint({
                 position: 'topleft',
                 sizeModes: ['A4Portrait', 'A4Landscape']
                 }).addTo(map);}")
    })

  }
)

然而,一切都没有发生.它实际上是一个白色的屏幕.如果我删除onRender部分,传单正常.

不幸的是,我对Shiny,leaflet,.js和github相对较新,所以我很难确定导致问题的方面.

Answer 1

解

  library(leaflet)
  library(shiny)
  library(htmlwidgets)

  jsfile <- "https://rawgit.com/rowanwins/leaflet-easyPrint/gh-pages/dist/bundle.js" 
  ui <- fluidPage(
    tags$head(tags$script(src = jsfile)),
    leafletOutput("map")
  )

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

    output$map <- renderLeaflet({
      leaflet() %>% 
        addProviderTiles("OpenStreetMap.Mapnik") %>%
        setView(-122.23, 37.75, zoom = 10) %>%
        onRender(
          "function(el, x) {
            L.easyPrint({
              sizeModes: ['Current', 'A4Landscape', 'A4Portrait'],
              filename: 'mymap',
              exportOnly: true,
              hideControlContainer: true
            }).addTo(this);
            }"
        )
      })

    }

  shinyApp(ui, server)

注意:leaflet-easyPrint取决于dom-to-image.根据dom-to-image自述文件,不支持Safari和Internet Explorer.但是,打印按钮可以在Chrome和Firefox中使用.

故障排除流程

如果我们运行app并检查元素,我们会看到以下错误:

让我们从第二个和第三个错误开始.

无法加载资源

此错误非常明显:URL https://github.com/rowanwins/leaflet-easyPrint/blob/gh-pages/dist//index.js不存在.路径错误:目录index.js中不存在dist.

我们希望使用bundle.js这条路径:https://github.com/rowanwins/leaflet-easyPrint/blob/gh-pages/dist/bundle.js.

没有加载脚本

GitHub使用严格的MIME类型检查,因此浏览器没有按预期使用该文件.我们需要使用rawgit.com路径.在这里阅读更多.要编写rawgit.com路径,请按照以下步骤(从链接的答案):

1. 在GitHub上找到您的链接,然后单击该文件的"Raw"版本.
2. 复制URL,并链接到它.
3. 将raw.githubusercontent.com更改为rawgit.com(非生产)或cdn.rawgit.com(生产)

我们应该使用这条路径:https://rawgit.com/rowanwins/leaflet-easyPrint/gh-pages/dist/bundle.js

TypeError:L.easyPrint不是函数

加载错误之前发生错误leaflet-easyPrint.这告诉我们onRender在leaflet-easyPrint加载并附加到窗口小部件之前被调用.Per Joe Cheng在这个线程中,运行时的htmldependency注入可以是异步的.他建议不要使用htmlDependency(src = c(href = "http://..."))任何与Shiny一起使用的依赖项.

相反,我们可以header在应用程序中包含远程JS文件.然后leaflet-easyPrint将被onRender调用之前加载.