es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Copiar .svg al portapapeles con los botones del teclado o haciendo clic derecho en una aplicación brillante.

Copiar .svg al portapapeles con los botones del teclado o haciendo clic derecho en una aplicación brillante.

21 Jul, 2023 Programación

Tengo la siguiente aplicación de Shiny en la que descargo un archivo .svg. En lugar de descargarlo, idealmente quiero poder copiarlo al portapapeles con Ctrl+C o incluso poder hacer clic derecho en la imagen y copiarla al portapapeles.

library(shiny)
library(DiagrammeR)
library(tidyverse)
# probablemente no necesite todos estos:
library(DiagrammeRsvg)
library(rsvg)
library(V8)# solo para la exportación de svg, pero tampoco funciona
library(xml2)

ui <- fluidPage(
  downloadButton("save_svg","Guardar"),
  grVizOutput("grr",width = "100%",height = "90vh")
)

server <- function(input, output) {
  reactives <- reactiveValues()
  observe({
    reactives$graph <- render_graph(create_graph() %>%
                                      add_n_nodes(n = 2) %>%
                                      add_edge(
                                        from = 1,
                                        to = 2,
                                        edge_data = edge_data(
                                          value = 4.3)))
  })
  output$grr <-
    renderGrViz(reactives$graph
    )
  output$save_svg <- downloadHandler(

    filename = function() {
      "test.svg"
    },
    content = function(file) {
      reactives$graph %>%
        export_svg() %>%
        read_xml() %>%
        write_xml(file)
    }
  )
}

# Ejecutar la aplicación
shinyApp(ui = ui, server = server)
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para copiar la imagen SVG al portapapeles en lugar de descargarla, podemos utilizar la biblioteca clipboard.js.

    Aquí está cómo podemos modificar el código:

    1. Agregar la biblioteca clipboard.js al código UI. Podemos descargarla desde su página web o utilizar un CDN como `https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js`.

    “`{r}
    ui <- fluidPage(
    # utilizar una clase o identificador para hacer referencia al elemento que queremos copiar
    grVizOutput(“grr”,width = “100%”,height = “90vh”,class = “copy-svg”),

    # Agregar la biblioteca clipboard.js a la página
    tags$head(tags$script(src=”https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js”)),

    # agregar un botón para copiar la imagen SVG
    # utilizar la misma clase que el elemento SVG
    actionButton(“copy_svg”, “Copiar SVG”, class = “copy-svg”)
    )


    2. Modificar la función `server` para agregar un event listener para el botón de copiado. Cuando se haga clic en el botón, podemos utilizar `DiagrammeRsvg::get_svg_string()` para obtener el código SVG, y luego copiarlo al portapapeles utilizando `clipboard.js`.

```{r}
server <- function(input, output) {
  reactives <- reactiveValues()

  observe({
    reactives$graph <- render_graph(create_graph() %>%
                                      add_n_nodes(n = 2) %>%
                                      add_edge(
                                        from = 1,
                                        to = 2,
                                        edge_data = edge_data(
                                          value = 4.3)))
  })

  output$grr <- renderGrViz(reactives$graph)

  output$save_svg <- downloadHandler(
    filename = function() {
      "test.svg"
    },
    content = function(file) {
      reactives$graph %>%
        export_svg() %>%
        writeLines(DiagrammeRsvg::get_svg_string()) # escribir el código SVG en el archivo
    }
  )

  # agregar event listener para el botón de copiado
  observeEvent(input$copy_svg, {
    # obtener el código SVG
    svg_code <- DiagrammeRsvg::get_svg_string()
    # copiar al portapapeles
    clipboardjs::write(svg_code)
    # mostrar un mensaje para indicar que se copió correctamente
    showNotification("SVG copiado al portapapeles", type = "message")
  })
}
    1. Agregar CSS para estilizar el botón de copiado.

    “`{r}
    ui <- fluidPage(
    grVizOutput(“grr”,width = “100%”,height = “90vh”,class = “copy-svg”),
    tags$head(tags$script(src=”https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js”)),
    actionButton(“copy_svg”, “Copiar SVG”, class = “copy-svg”),

    # estilizar el botón de copiado
    tags$style(”
    .copy-svg {
    margin-top: 10px;
    margin-bottom: 10px;
    display: block;
    max-width: 100px;
    }
    “)
    )
    “`

    Ahora, cuando el usuario haga clic en el botón “Copiar SVG” o haga clic derecho en la imagen SVG y seleccione “Copiar”, el código SVG se copiará al portapapeles.

Comments are closed.