如何在A4页面渲染动态HTML内容并解决分页溢出问题？

方法一：CSS原生分页控制 #

利用CSS打印媒体特性和分页属性，直接在样式层面控制页面拆分：

• 定义A4页面尺寸与页边距：

@page {
  size: A4;
  margin: 2cm; /* 预留页边距，避免内容贴边被裁剪 */
}

• 禁止关键元素跨页断裂，比如段落、标题：

p, h1, h2, h3 {
  page-break-inside: avoid;
}

• 强制在指定位置分页，比如章节结尾：

.section-end {
  page-break-after: always;
}

• 打印预览时，浏览器会自动根据这些规则拆分页面，无需额外计算。

方法二：JavaScript动态计算分页（适配高度不确定的动态内容） #

当内容高度完全动态时，用JS手动拆分内容到独立的A4页面容器：

1. 先确定A4页面的可用高度（按96DPI换算：A4纸高度297mm≈1123px，减去上下页边距像素值）
2. 遍历内容元素，累计高度，超出阈值时新建页面容器：

// 计算可用页面高度（示例：上下边距各40px）
const usablePageHeight = 1123 - 80;
let currentTotalHeight = 0;
const contentRoot = document.getElementById('content-root');
const contentItems = Array.from(contentRoot.children);

// 初始化第一个页面容器
let currentPage = document.createElement('div');
currentPage.classList.add('a4-page');
contentRoot.appendChild(currentPage);

contentItems.forEach(item => {
  const itemHeight = item.offsetHeight;
  // 当前页面放不下时，新建页面
  if (currentTotalHeight + itemHeight > usablePageHeight) {
    currentPage = document.createElement('div');
    currentPage.classList.add('a4-page');
    contentRoot.appendChild(currentPage);
    currentTotalHeight = 0;
  }
  currentPage.appendChild(item);
  currentTotalHeight += itemHeight;
});

3. 给页面容器添加A4样式：

.a4-page {
  width: 210mm;
  height: 297mm;
  margin: 1cm auto;
  padding: 2cm;
  border: 1px solid #ddd; /* 预览时显示边框，打印可移除 */
  box-sizing: border-box;
  overflow: hidden;
}

/* 打印时去掉边框，强制分页 */
@media print {
  .a4-page {
    border: none;
    margin: 0;
    page-break-after: always;
  }
}

方法三：CSS网格布局配合分页容器 #

用Grid创建固定尺寸的A4页面网格，再将内容填充到网格项中：

.page-container {
  display: grid;
  grid-template-columns: 210mm;
  gap: 1cm;
  justify-content: center;
}

.a4-page {
  height: 297mm;
  padding: 2cm;
  box-sizing: border-box;
  overflow: hidden;
}

结合JS动态分配内容，确保每个网格项（A4页面）的内容高度不超过容器高度，溢出部分自动流转到下一个网格项。

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