如何从innerHTML字符串中获取并跟踪div高度以实现PDF自动分页？

首先修正原代码的几个问题：重复id="activityItems"会导致DOM查询异常，内存中创建的元素未挂载到文档无法获取真实渲染高度，同时预留50px左右的缓冲阈值避免内容被截断，具体实现如下：

原生JS实现 #

// 固定配置
const PDF_MAX_HEIGHT = 792
const PAGE_BUFFER = 42 // 缓冲值，触发分页的高度为792-42=750px，可自行调整
const PAGE_BREAK = '<div style="page-break-after: always;"></div>'

// 创建隐藏的测量容器，挂载到body不影响页面显示
const measureContainer = document.createElement('div')
measureContainer.id = 'items'
measureContainer.style.position = 'absolute'
measureContainer.style.left = '-9999px'
measureContainer.style.top = '0'
// 必须和PDF内容区实际宽度一致，才能得到准确的高度计算结果
measureContainer.style.width = '你的PDF内容区域宽度，比如600px'
document.body.appendChild(measureContainer)

let finalHtml = ''
// 注意原代码的checlboxes是拼写错误，实际使用时替换为你正确的变量名
for (let i = 1; i < checkboxes.length; i++) {
  if (checkboxes[i].checked) {
    // 注意原代码的row变量需要你对应自己的行获取逻辑，此处保留原有取值逻辑
    const OfficeName = row.cells[4].innerHTML
    const Summary = row.cells[8].innerHTML
    const Activities = row.cells[10].innerHTML
    // 原代码的SummaryTitle、ActivityDetails为笔误，对应修正为上面的Summary、Activities
    let itemHtml = '<br/>'
    itemHtml += `<div class="row"><div class="col-md-6" style="display:inline-block; font-weight:bold">${Summary} FROM ${OfficeName}: </div></div>`
    itemHtml += `<div class="row"><div class="col-md-6" style="display:inline-block; text-align:justify">${Activities}</div></div>`
    itemHtml += '<br/>'

    // 临时插入内容计算当前总高度
    measureContainer.innerHTML += itemHtml
    const currentHeight = measureContainer.offsetHeight

    if (currentHeight >= PDF_MAX_HEIGHT - PAGE_BUFFER) {
      // 高度超过阈值，插入分页符，重置测量容器的高度计数
      finalHtml += PAGE_BREAK
      measureContainer.innerHTML = itemHtml
    }
    // 累加当前内容到最终输出的HTML
    finalHtml += itemHtml
  }
}

// 用完移除测量容器，不污染页面
document.body.removeChild(measureContainer)
// 最终的finalHtml就是带分页符的完整内容，直接用它生成PDF即可

jQuery实现方案 #

如果你更习惯用jQuery，核心的高度获取逻辑可以简化为：

// 直接调用height()方法即可拿到测量容器的当前高度
const currentHeight = $('#items').height()
// 插入内容、判断分页的逻辑和上面原生JS完全一致

关键说明 #

• 测量容器的宽度必须和PDF内容区宽度完全一致，否则文字换行规则不同会导致高度计算偏差
• 绝大多数PDF导出工具都会自动识别page-break-after: always属性实现自动分页
• 缓冲阈值可以根据你的内容边距、页眉页脚高度自行调整

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