Export module

RScript\input.R

output$uiRandom <- renderUI({
  sliderInput(inputId = "random", 
                 label   = "Number",
                 min     = 50,
                 max     = 100,
                 step    = 1,
                 value   = 60)
})




#######################################
#### Export figure and data module ####
#######################################

output$uiDim <- renderUI({
  textInput(inputId = "dim", label = "Figure dimensions (W x H):", 
            value = "1000 x 1200")
})

# Export button;
output$uiExport <- renderUI({
  HTML(paste('<button style="cursor:pointer" id="export" onclick="figExport()">',
             ("Export"), '</button>', sep = ""))
})

# Export figure as PDF;
output$uiFigPDF <- renderUI({
  downloadLink(outputId = "figPDF", 
               label    = ("Export figure as PDF"))
})
output$figPDF <- downloadHandler(
  filename = function() {
    paste('Highcharts-', Sys.Date(), '.pdf', sep='')
  },
  content = function(file) {
    system(paste("inkscape -f", p$tempSVG, "-A", p$tempPDF))
    file.copy(p$tempPDF, file)
  }
)

# Export figure as PNG;
output$uiFigPNG <- renderUI({
  downloadLink(outputId = "figPNG", 
               label    = ("Export figure as PNG (MS Office)"))
})
output$figPNG <- downloadHandler(
  filename = function() {
    paste('Highcharts-', Sys.Date(), '.png', sep='')
  },
  content = function(file) {
    system(paste("inkscape -f", p$tempSVG, "-d 300 -e ", p$tempPNG))
    file.copy(p$tempPNG, file)
  }
)


# Export figure data;
output$uiFigDat <- renderUI({
  downloadLink(outputId = "figDat", 
               label    = ("Export figure data"))
})
output$figDat <- downloadHandler(
  filename = function() {
    paste('Highcharts data-', Sys.Date(), '.csv', sep='')
  },
  content = function(file) {
    write.table(p$data, file, row.names = FALSE, quote = FALSE, sep = ";")
  }
)

#### 
observe({
  p$tempSVG <- paste(tempfile(), "svg", sep =".")
  p$tempPDF <- paste(tempfile(), "pdf", sep =".")
  p$tempPNG <- paste(tempfile(), "png", sep =".")
  if (!is.null(input$svg)) {
    if (nchar(input$svg)>0) {
      writeLines(input$svg, p$tempSVG)
    }
  }
})

RScript\output.R

observe({
  if (!is.null(input$random)) {
    output$fig <- renderChart({
      ## Highchart basic;
      H <- Highcharts$new()
      H$addParams(dom = "fig")

      if (!is.null(input$dim)) {
        H$exporting(sourceWidth = as.numeric(strsplit(input$dim, " *x *")[[1]][1]),
                    sourceHeight= as.numeric(strsplit(input$dim, " *x *")[[1]][2]),
                    enabled = FALSE)
      }
      dat <- rnorm(input$random)
      H$data(dat)
      p$data <- dat
      H
    })
  }
})

server.R

library(shiny)
library(rCharts)

shinyServer(function(input, output) {
  p <- reactiveValues()
  
  ## Source input and output files;
  source("RScript/input.R", local = TRUE)
  source("RScript/output.R", local = TRUE)
}) 

ui.R

shinyUI(bootstrapPage(
  # Add custom CSS
  tagList(
    tags$head(
      tags$link(rel="stylesheet", type="text/css",href="style.css"),
      tags$script(type="text/javascript", src = "app.js")
    )
  ),
  

  
  # Database, Group, Subgroup and Year; 
  div(class="input",
      div(class = "wPanel",
          uiOutput("uiRandom")
      ),

      div(class = "wPanel",id = "Export",
          uiOutput("uiDim"),
          uiOutput("uiExport"),
          div(class = "ePanel", 
              uiOutput("uiFigPNG"), 
              uiOutput("uiFigPDF"), 
              uiOutput("uiFigDat")),
          textInput(inputId = "svg", label   = "")
      )
  ),

  
  # Output: figures and table;
  div(class = "output", chartOutput("fig", lib = "highcharts"))
  
))

www\app.js

// Export module
function figExport() {
  // Select chart and get svg data;
  var chart = $(".shiny-html-output.rChart.highcharts.shiny-bound-output").highcharts()
  var svg = chart.getSVG();
  var svg = svg.replace(/<g class="highcharts-button".*?g>/, "")
  var svg = svg.replace(/<g class="highcharts-tooltip".*?g>/, "")
  // Empty target object and fill with new svg data;
  var target = $("#svg");
  target.val("");
  target.val(svg);
  target.trigger("change");
  $("#Export").attr("style", "height: 165px;")
  $(".ePanel").attr("style", "visibility: visible;");
  $(".wPanel:has(#export)").mouseleave(function(){
    $(".ePanel").attr("style", "visibility: hidden;");
    $("#Export").attr("style", "height: 90px;")
  });
  
}

www\style.css

body {
  margin:15px;
  font-size: 12px;
}

.busy { 
  position:absolute;
  top: 40%;
  left: 50%;
  z-index: 1;
}

#lang {
  position:absolute;
  right: 30px;
  top: 5px;
  z-index: 1;
}

#uiLayout {
  padding-bottom: 10px;
}


label.radio{
  float:left;
  height:20px;
  padding-right: 10px;
}



.input {
  float: left;
  width: 260px;
  //padding-top: 20px;
  padding-right: 20px;
}

.output div {
  //width: 75vw;
  overflow-y:hidden;
}

.highcharts {
  height: 90vh;
}

.shiny-output-error {
  visibility: hidden;
}

.wPanel {
  //width: 224px;
  min-height: 10px;
  padding: 10px 15px 10px 15px;
  margin-bottom: 10px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
  -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.sPanel {
  padding: 0px 0px 5px 5px;
  margin-bottom: 5px;
  margin-top: -5px;
  margin-right: 15px;
  background-color: #f5f5f5;
  width: 180px;
}

.sPanel label {
  font-size: 12px;
}

#Export {
  height: 90px;
}

.ePanel {
  visibility: hidden;
  //display:none;
  padding: 10px 0px 0px 0px;
}

#help, .hPanel {
  position:absolute;
  right: 15px;
  top: 11px;
  z-index: 1;
}

.hPanel {
  display:none;
  min-height: 10px;
  padding: 5px 5px 5px 5px;
  margin-bottom: 5px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
  -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.cPanel {
  display:none;
  padding-top: 10px;
  padding-bottom: 30px;
}

#submit {
  float: right;
}

#svg, #svg2 {
  display:none;
}