javascript - Rshiny 将文件列表传递给 Javascript 下载器
问题描述
多亏了Stephane Laurent ,我才刚刚起步!
我有一个 Rshiny 应用程序,它根据用户从数据表中选择行来生成时间线。然后,用户可以下载一个 zip 文件,其中包含表格、时间线以及与表格中所选行相关的文件。
我相信我需要将文件名从我的 Rshiny 表传递给 JS,以便 JS 将文件 URL 添加到 JSZip 的函数中。这些文件存储在 www 文件夹下的我的应用程序目录中。所以“https://server.me/myapp/Room.pdf”是导航到文件的方式。(我过去只用 php 做过这样的事情。)
所以在下面的代码中,如果用户点击 Big Room 和 Red Rover,然后生成一个时间线,然后下载。他们会得到一个包含timeline.png、timeline.csv、Room.pdf和Activity.docx的zip文件
奖励 我还希望能够将特定文件添加到所有下载中。(我想这相当简单,因为我可以将它指向特定的 url “https://server.me/myapp/Thanks_for_visiting.pdf”,而不需要 Rshiny 做任何事情。)
我可以传递多个“事物:使用 session$sendCustomMessage 吗?或者做两次?比如:
file_list <- as.data.frame(row_data$file_name)
output$tbl2 <- DT::renderDataTable({
file_list})
session$sendCustomMessage("file_list",
fromJSON(toJSON(input$file_list), simplifyDataFrame = FALSE))
代码
library(shiny)
library(timevis)
library(lubridate)
library(dplyr)
library(jsonlite)
starthour <- 8
today <- as.character(Sys.Date())
todayzero <- paste(today, "00:00:00")
todayAM <- paste(today, "07:00:00")
todayPM <- paste(today, "18:00:00")
items <- data.frame(
category = c("Room", "IceBreaker", "Activity", "Break"),
group = c(1, 2, 3, 4),
className = c ("red_point", "blue_point", "green_point", "purple_point"),
content = c("Big Room", "Introductions", "Red Rover", "Lunch"),
length = c(480, 60, 120, 90),
file_name = c("Room.pdf", "NA", "Activity.docx", "Break.txt")
)
groups <- data.frame(id = items$group, content = items$category)
data <- items %>% mutate(
id = 1:4,
start = as.POSIXct(todayzero) + hours(starthour),
end = as.POSIXct(todayzero) + hours(starthour) + minutes(items$length)
)
js <- "
function downloadZIP(jsontable){
var csv = Papa.unparse(jsontable);
domtoimage.toPng(document.getElementById('appts'), {bgcolor: 'white'})
.then(function (dataUrl) {
var zip = new JSZip();
var idx = dataUrl.indexOf('base64,') + 'base64,'.length;
var content = dataUrl.substring(idx);
zip.file('timeline.png', content, {base64: true})
.file('timeline.csv', btoa(csv), {base64: true});
zip.generateAsync({type:'base64'}).then(function (b64) {
var link = document.createElement('a');
link.download = 'mytimeline.zip';
link.href = 'data:application/zip;base64,' + b64;
link.click();
});
});
}
$(document).on('shiny:connected', function(){
Shiny.addCustomMessageHandler('download', downloadZIP);
});"
ui <- fluidPage(
tags$head(
tags$script(src = "https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"),
tags$script(src = "https://cdnjs.cloudflare.com/ajax/libs/jszip/3.5.0/jszip.min.js"),
tags$script(src = "https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.2.0/papaparse.min.js"),
tags$script(HTML(js)),
tags$style(
HTML(
"
.red_point { border-color: red; border-width: 2px; }
.blue_point { border-color: blue; border-width: 2px; }
.green_point { border-color: green; border-width: 2px; }
.purple_point { border-color: purple; border-width: 2px; }
"
)
)
),
DT::dataTableOutput("tbl1"),
conditionalPanel(
condition = "typeof input.tbl1_rows_selected !== 'undefined' && input.tbl1_rows_selected.length > 1",
actionButton(class = "btn-success",
"button2",
"GENERATE TIMELINE")
),
conditionalPanel(
condition = "input.button2 > 0",
timevisOutput("appts"),
actionButton("download", "Download timeline", class = "btn-success")
)
)
server <- function(input, output, session) {
output$tbl1 <- DT::renderDataTable({
data
},
caption = 'Select desired options and scroll down to continue.',
selection = 'multiple',
class = "display nowrap compact",
extensions = 'Scroller',
options = list(
dom = 'Bfrtip',
paging = FALSE,
columnDefs = list(list(visible = FALSE))
))
observeEvent(input$button2, {
row_data <- data[input$tbl1_rows_selected, ]
output$appts <- renderTimevis(timevis(
data = row_data,
groups = groups,
fit = TRUE,
options = list(
editable = TRUE,
multiselect = TRUE,
align = "center",
stack = TRUE,
start = todayAM,
end = todayPM,
showCurrentTime = FALSE,
showMajorLabels = FALSE
)
))
})
observeEvent(input$download, {
session$sendCustomMessage("download",
fromJSON(toJSON(input$appts_data), simplifyDataFrame = FALSE))
})
}
shinyApp(ui, server)
解决方案
library(base64enc)
js <- "
function downloadZIP(x){
var csv = Papa.unparse(x.table);
var URIs = x.URIs;
domtoimage.toPng(document.getElementById('appts'), {bgcolor: 'white'})
.then(function (dataUrl) {
var zip = new JSZip();
var idx = dataUrl.indexOf('base64,') + 'base64,'.length;
var content = dataUrl.substring(idx);
zip.file('timeline.png', content, {base64: true})
.file('timeline.csv', btoa(csv), {base64: true});
for(let i=0; i < URIs.length; ++i){
zip.file(URIs[i].filename, URIs[i].uri, {base64: true});
}
zip.generateAsync({type:'base64'}).then(function (b64) {
var link = document.createElement('a');
link.download = 'mytimeline.zip';
link.href = 'data:application/zip;base64,' + b64;
link.click();
});
});
}
$(document).on('shiny:connected', function(){
Shiny.addCustomMessageHandler('download', downloadZIP);
});"
observeEvent(input$download, {
filenames <- data[input$tbl1_rows_selected, "file_name"]
files <- file.path(".", "www", filenames)
URIs <- lapply(seq_along(files), function(i){
URI <- dataURI(file = files[i])
list(filename = filenames[i], uri = substr(URI, 14, nchar(URI)))
})
table <- fromJSON(toJSON(input$appts_data), simplifyDataFrame = FALSE)
session$sendCustomMessage(
"download",
list(table = table, URIs = URIs)
)
})
推荐阅读
- macros - 如何编写一个 DSL 来创建一个带参数的函数?
- java - 我如何知道选择哪个 Maven 依赖版本?
- javascript - 修改后我的数据库表没有更新
- antlr - 解析器没有使用所有标记,这是一个错误吗?
- c# - C# WPF XAML 工具包,单击按钮切换视图
- mysql - INDEX 没有改善 sql 查询结果
- arrays - 如何使用 json 对象中的数组以及不在 json 对象中的数组在 React 应用程序中设置状态?
- git - Git flow-需要从另一个分支创建功能分支
- javascript - 在 mouseenter 上使用 javascript 旋转 div 并将它们旋转回 mouseleave 上的原始位置
- javascript - 条目存在时删除 Typescript 界面列表中的元素,始终显示负索引