闪亮的传单easyPrint插件 [英] Shiny leaflet easyPrint plugin

问题描述

我正在尝试将 easyPrint插件合并到我闪亮的传单应用程序中.我想要的是看起来像演示的东西，但是有光泽.

I'm trying to incorporate the easyPrint plugin into my shiny leaflet app. What I want is something that looks like the demo, but in shiny.

我尝试模仿示例，但未成功.

I have tried to mimic the examples, but have been unsuccessful.

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

Here's my code for my R code so far:

    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部分，则该传单的行为正常.

However, nothing is happening. It's literally a white screen. If I remove the onRender part, the leaflet acts normal.

不幸的是，我对Shiny，leaflet，.js和github还是比较陌生，所以我努力确定是哪个方面导致了问题.

Unfortunately, I'm relatively new to Shiny, leaflet, .js, and github, so I'm struggling to identify which aspect is causing the problem.

推荐答案

解决方案

  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中使用.

如果我们运行应用程序并检查元素，则会看到以下错误:

If we run the app and inspect element, we see the following errors:

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

Let's start with the second and third errors.

加载资源失败

这个错误是不言自明的:URL https://github.com/rowanwins/leaflet-easyPrint/blob/gh-pages/dist//index.js 不存在.路径错误:dist目录中不存在index.js.

This error is pretty self-explanatory: the URL https://github.com/rowanwins/leaflet-easyPrint/blob/gh-pages/dist//index.js doesn’t exist. The path is wrong: index.js doesn’t exist in the dist directory.

我们要在以下路径中使用bundle.js: https://github.com/rowanwins/leaflet-easyPrint/blob/gh-pages/dist/bundle.js .

We want to use bundle.js with this path: https://github.com/rowanwins/leaflet-easyPrint/blob/gh-pages/dist/bundle.js.

未加载脚本

GitHub使用严格的MIME类型检查，因此浏览器未按预期使用文件.我们需要使用 rawgit.com 路径.在此处了解更多信息.要编写rawgit.com路径，请执行以下步骤(来自链接的答案):

GitHub uses strict MIME type checking, so the browser isn’t using the file as intended. We need to use a rawgit.com path instead. Read more here. To write a rawgit.com path, follow these steps (from the linked answer):

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

1. Find your link on GitHub, and click to the "Raw" version of the file.
2. Copy the URL, and link to it.
3. Change raw.githubusercontent.com to rawgit.com (non-production) or cdn.rawgit.com (production)

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

We should use this path: https://rawgit.com/rowanwins/leaflet-easyPrint/gh-pages/dist/bundle.js

TypeError:L.easyPrint不是函数

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

The error occurred before the errors from loading leaflet-easyPrint. This tells us that onRender is getting called before leaflet-easyPrint is loaded and attached to the widget. Per Joe Cheng in this thread, htmldependency injection at runtime can be asynchronous. He recommends against using htmlDependency(src = c(href = "http://...")) for any dependency that's intended to be used with Shiny.

相反，我们只能将远程JS文件包含在应用程序的 header 中.然后，将在调用onRender之前加载leaflet-easyPrint.

Instead, we can just include the remote JS file in the header of the app. Then leaflet-easyPrint will be loaded before onRender is called.

这篇关于闪亮的传单easyPrint插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！