webshot2::webshot截取huxtable表格为PNG时右侧被裁剪如何通用解决

问题背景 #

• 使用webshot2::webshot将R语言中huxtable包创建的HTML表格转换为PNG文件时，输出结果最右侧内容被意外裁剪，暂未找到通用修复方法。
• 手动调整cliprect参数虽然可以实现正常截取，但后续需要处理大量表格，非通用的手动调整方案不具备可扩展性，目前不清楚常规工作流失效的原因。
• 曾尝试使用前代包webshot::webshot实现需求，但优先寻求适用于webshot2的解决方案。

问题复现代码 #

library(magrittr)
library(huxtable)
set.seed(1337)

data <- matrix(rnorm(25), 35, 10)
my_hux <- as_hux(data) %>%
  set_outer_borders(0.4) %>%
  map_background_color(by_rows("grey95", "white")) %>%
  map_text_color(by_quantiles(c(0.1, 0.9), c("red", "black", "green3")))

quick_html(my_hux, file = "ahuxtable.html", open = FALSE)

webshot2::webshot(url = "ahuxtable.html", file = "ahuxtable.png",
                  zoom = 5, selector = "table")

问题原因 #

裁剪的核心原因是webshot2默认使用content-box模型计算selector指定元素的截取范围，计算宽度时不会把huxtable设置的表格外边框占的像素算进去。表格列数较少时漏算的宽度不明显，列数增多后，漏算的边框、页面默认边距宽度累积，就会出现右侧内容被裁剪的情况。手动调整cliprect本质是手动补上这部分漏算的宽度，虽然能生效，但完全不适合批量处理场景。

通用修复方案 #

不需要逐张调整参数，以下两个方案均为通用方案，不受表格列数、行数、样式变化影响，可直接用于批量处理场景：

• 方案1（改webshot2调用参数，成本最低）：调用时新增两个固定参数即可，不需要针对单个表格调整数值
  将原有webshot调用代码替换为以下写法：

  webshot2::webshot(url = "ahuxtable.html", file = "ahuxtable.png",
                    zoom = 5, 
                    selector = "table",
                    # 切换为边框盒计算模式，将表格外边框尺寸纳入截取范围
                    box_model = "border",
                    # 给选区统一加10px扩展边，抵消页面默认边距带来的误差，所有表格通用
                    expand = 10)
  

• 方案2（适配所有HTML内容，稳定性最高）：生成HTML文件后注入一行全局样式，让页面宽度自动适配表格尺寸，从根源避免视口宽度不足导致的裁剪
  完整可运行代码如下：

  library(magrittr)
  library(huxtable)
  set.seed(1337)
  
  data <- matrix(rnorm(25), 35, 10)
  my_hux <- as_hux(data) %>%
    set_outer_borders(0.4) %>%
    map_background_color(by_rows("grey95", "white")) %>%
    map_text_color(by_quantiles(c(0.1, 0.9), c("red", "black", "green3")))
  
  quick_html(my_hux, file = "ahuxtable.html", open = FALSE)
  # 注入全局样式，让页面宽度自动适配内容，预留10px内边距
  html_content <- readLines("ahuxtable.html", warn = FALSE)
  html_content <- sub("<head>", '<head><style>html,body{width:max-content;margin:0;padding:10px;}</style>', html_content)
  writeLines(html_content, "ahuxtable.html")
  
  webshot2::webshot(url = "ahuxtable.html", file = "ahuxtable.png",
                    zoom = 5, selector = "table")
  

不建议回退使用旧版webshot包，该包依赖已停止维护的PhantomJS内核，对现代CSS特性的兼容度远低于基于Chrome Headless开发的webshot2，长期使用会遇到更多样式兼容问题。

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