如何用actionButton保存leaflet/mapview地图为PDF？图例无颜色求助

问题根源 #

你碰到的情况是因为webshot依赖的PhantomJS渲染引擎，在生成PDF时对mapview/Leaflet生成的SVG格式图例支持不佳，没法正确渲染填充色；但PNG截图时引擎处理SVG的逻辑不一样，所以能正常显示颜色。

可行解决方案 #

方案1：换用webshot2（推荐） #

webshot2基于Chrome/Chromium而非PhantomJS，对现代网页元素（包括SVG）的支持好很多，步骤简单：

1. 安装并加载webshot2：

install.packages("webshot2")
library(webshot2)

2. 修改mapshot2的调用代码（不需要再依赖PhantomJS）：

observeEvent(input$print_map, {
  mapshot2(user.created.map(), 
           file = "map_zoom.pdf", 
           remove_controls = c("zoomControl", "layersControl"),
           vwidth = 1200,  # 可根据需求调整宽度提升清晰度
           vheight = 800)
})

首次使用时，按照提示安装Chrome/Chromium即可，后续就能正常导出带颜色图例的PDF。

方案2：把SVG图例转成图片 #

如果没法用webshot2，可以手动把SVG图例转成图片格式再添加到地图：

1. 先提取图例并转成PNG：

# 获取mapview对象
mv <- mapview(breweries)
# 提取图例的HTML代码
legend_html <- mv@map$dependencies[[which(sapply(mv@map$dependencies, function(x) x$name == "mapview"))]]$html
# 把图例HTML转成PNG图片
webshot::webshot(html = legend_html, file = "legend.png", vwidth = 200, vheight = 300)

2. 替换原SVG图例为图片：

user.created.map <- reactive({
  mv@map %>%
    setView(lng = input$mymap_center$lng, lat = input$mymap_center$lat, zoom = input$mymap_zoom) %>%
    addControl(html = '<img src="legend.png" style="width:200px;">', position = "bottomright") %>%
    removeControl("legend")  # 移除原来的SVG图例
})

这样导出PDF时，图例是图片，颜色就能正常显示了。

方案3：用HTML转PDF工具 #

先把地图存成HTML，再用wkhtmltopdf转成PDF：

1. 先下载安装wkhtmltopdf，记得把它添加到系统环境变量PATH里
2. 修改保存逻辑：

observeEvent(input$print_map, {
  # 先把地图保存为独立HTML文件
  htmlwidgets::saveWidget(user.created.map(), file = "temp_map.html", selfcontained = TRUE)
  # 调用wkhtmltopdf转成PDF
  system("wkhtmltopdf temp_map.html map_zoom.pdf")
  # 删除临时HTML文件
  file.remove("temp_map.html")
})

测试验证 #

修改代码后点击「Print Map」按钮生成PDF，图例的颜色应该就能正常显示了。

内容的提问来源于stack exchange，提问作者Salvador