使用R htmltools::tagList生成分页PDF时孙元素无法渲染的问题

问题描述 #

使用R的pagedown结合htmltools::tagList创建分页PDF报告，每页整合单个站点的野外调查结果（主要是图片和表格）。内容本身可正常渲染，但嵌套HTML元素时，父元素和子元素显示正常，孙元素却以文本形式出现在父div中。希望通过嵌套div确保相关内容在同一页面并控制容器尺寸，需明确问题原因及解决办法。

复现代码 #

---
title: "My Report"
output:
  pagedown::html_paged:
    toc: false
    number_sections: false
    fontsize: 8pt
classoption: a4paper
---
  

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
library(shiny)
library(htmltools)

# R logo图片地址
r_logo_url <- "https://www.r-project.org/logo/Rlogo.png"

# 创建包含HTML元素的tagList
my_tagList <- tagList(
  
  p("父div外的文本和R图标 - 显示正常"),
  img(src = r_logo_url, alt = "R Logo", style = "width: 100px;"),
  
  div(
    
    style = "border: 2px solid blue;",
    
    p("父div内的文本和R图标 - 显示正常"),
    img(src = r_logo_url, style = "width: 100px;"),
    
    # 问题出现区域：该div能渲染，但内部元素以文本形式显示
    div(
      
      style = "border: 2px solid black; margin: 5px;",
      
      p("此文本和下方图标无法渲染，仅以文本形式显示", style = "border-bottom: 2px solid black;"),
      img(src = r_logo_url, style = "width: 100px;")
      
    )
  )
)

# 原输出方式导致孙元素异常
print(my_tagList)

## 问题原因与解决办法

### 原因
在`results='asis'`的代码块中使用`print()`输出`htmltools`创建的嵌套标签结构时，`print()`函数无法正确解析深层嵌套的HTML节点，会将孙元素的HTML代码直接转换为纯文本输出，而非渲染成对应的HTML元素。

### 解决办法
使用`htmltools::renderTags()`函数将标签结构转换为可直接输出的HTML字符串，再通过`cat()`打印，确保所有嵌套层级的元素都能正确渲染。

### 修改后的核心代码
将原代码中的`print(my_tagList)`替换为：
```r
cat(htmltools::renderTags(my_tagList)$html)

完整修改后的代码块：

```{r echo=FALSE, results='asis'}
# R logo图片地址
r_logo_url <- "https://www.r-project.org/logo/Rlogo.png"

# 创建包含HTML元素的tagList
my_tagList <- tagList(
  
  p("父div外的文本和R图标 - 显示正常"),
  img(src = r_logo_url, alt = "R Logo", style = "width: 100px;"),
  
  div(
    
    style = "border: 2px solid blue;",
    
    p("父div内的文本和R图标 - 显示正常"),
    img(src = r_logo_url, style = "width: 100px;"),
    
    div(
      
      style = "border: 2px solid black; margin: 5px;",
      
      p("此文本和下方图标现在可正常渲染", style = "border-bottom: 2px solid black;"),
      img(src = r_logo_url, style = "width: 100px;")
      
    )
  )
)

# 正确输出嵌套HTML元素
cat(htmltools::renderTags(my_tagList)$html)

### 额外优化（确保内容同页）
若要保证容器内内容不被分页拆分，可在最外层div添加CSS分页控制属性：
```css
style = "border: 2px solid blue; page-break-inside: avoid;"

内容的提问来源于stack exchange，提问作者v.eriksson