如何在渲染前判断内容是否超出待创建容器边界以实现分页？

你不需要必须在主页面创建隐藏元素来计算尺寸，更可靠的方式是在新打开的打印窗口内完成渲染、尺寸计算和分页逻辑——因为打印窗口的样式环境和最终打印/PDF导出的环境完全一致，能避免主页面样式干扰导致的计算偏差。

具体实现思路 #

1. 打开新窗口后，先写入包含打印专用样式的基础HTML结构
2. 待窗口DOM加载完成后，按设定规则（每页最多9个容器）或动态高度拆分内容
3. 对超出分页阈值的内容，插入续页标题并添加分页符，最后触发打印

代码示例（静态每页9个容器） #

function printSelectedData(dataItems) {
  // 构建打印页面的基础HTML，包含打印专用样式
  const baseHtml = `
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>打印内容</title>
      <style>
        /* 容器样式，匹配你的业务需求 */
        .container {
          margin: 12px auto;
          padding: 18px;
          border: 1px solid #ddd;
          width: 90%;
          box-sizing: border-box;
        }
        /* 续页标题样式 */
        .continuation-title {
          font-weight: bold;
          font-size: 1.1em;
          margin: 20px 0 10px 5%;
        }
        /* 分页符样式，确保打印时自动分页 */
        .page-separator {
          page-break-after: always;
        }
        /* 打印时优化页面边距 */
        @media print {
          body { margin: 0; padding: 20px; }
          .page-separator:last-child { display: none; }
        }
      </style>
    </head>
    <body>
      <div id="print-root"></div>
    </body>
    </html>
  `;

  // 打开新打印窗口
  const printWin = window.open('', '_blank');
  printWin.document.write(baseHtml);
  printWin.document.close();

  // 等待窗口DOM加载完成后处理分页
  printWin.onload = function() {
    const root = printWin.document.getElementById('print-root');
    const totalItems = dataItems.length;
    const itemsPerPage = 9;
    const totalPages = Math.ceil(totalItems / itemsPerPage);

    // 按分页拆分内容并渲染
    for (let page = 1; page <= totalPages; page++) {
      const pageDiv = printWin.document.createElement('div');
      // 非第一页添加续页标题
      if (page > 1) {
        const title = printWin.document.createElement('div');
        title.className = 'continuation-title';
        title.textContent = `"Content X" cont. [${page}/${totalPages}]`;
        pageDiv.appendChild(title);
      }

      // 截取当前页的内容
      const startIdx = (page - 1) * itemsPerPage;
      const endIdx = Math.min(startIdx + itemsPerPage, totalItems);
      const pageItems = dataItems.slice(startIdx, endIdx);

      // 添加当前页的所有容器
      pageItems.forEach(item => {
        const container = printWin.document.createElement('div');
        container.className = 'container';
        container.innerHTML = item; // 假设dataItems是格式化好的HTML字符串数组
        pageDiv.appendChild(container);
      });

      // 添加分页符（最后一页不需要）
      if (page < totalPages) {
        pageDiv.className = 'page-separator';
      }

      root.appendChild(pageDiv);
    }

    // 触发打印并关闭窗口
    printWin.print();
    printWin.close();
  };
}

// 调用示例：printSelectedData(你的格式化内容数组);

可选：动态高度计算（适配不固定高度的容器） #

如果container高度不固定，可以替换分页逻辑为基于页面高度的动态计算：

// 在printWin.onload内替换原有分页逻辑
const tempWrap = printWin.document.createElement('div');
// 先渲染所有容器到临时区域
dataItems.forEach(item => {
  const container = printWin.document.createElement('div');
  container.className = 'container';
  container.innerHTML = item;
  tempWrap.appendChild(container);
});
root.appendChild(tempWrap);

const containers = tempWrap.querySelectorAll('.container');
const pageHeight = printWin.innerHeight - 40; // 减去页面上下边距
let currentPageHeight = 0;
let currentPageContainers = [];
let pageNum = 1;
let totalPages = 1;

containers.forEach(container => {
  const containerHeight = container.offsetHeight;
  // 如果当前页添加这个容器会超出高度，则分页
  if (currentPageHeight + containerHeight > pageHeight && currentPageContainers.length > 0) {
    renderPage(currentPageContainers, pageNum);
    currentPageContainers = [];
    currentPageHeight = 0;
    pageNum++;
    totalPages = Math.ceil((containers.length - currentPageContainers.length) / currentPageContainers.length);
  }
  currentPageContainers.push(container);
  currentPageHeight += containerHeight;
});

// 渲染最后一页
if (currentPageContainers.length > 0) {
  renderPage(currentPageContainers, pageNum);
}

// 移除临时容器
tempWrap.remove();

// 渲染单页的辅助函数
function renderPage(containers, page) {
  const pageDiv = printWin.document.createElement('div');
  if (page > 1) {
    const title = printWin.document.createElement('div');
    title.className = 'continuation-title';
    title.textContent = `"Content X" cont. [${page}/${totalPages}]`;
    pageDiv.appendChild(title);
  }
  containers.forEach(c => pageDiv.appendChild(c));
  if (page < totalPages) {
    pageDiv.className = 'page-separator';
  }
  root.appendChild(pageDiv);
}

为什么不推荐主页面隐藏元素？ #

如果在主页面创建隐藏元素计算，你必须保证隐藏元素的样式（字体、边距、宽度等）和打印窗口完全一致，否则会出现“主页面计算能放10个，但打印窗口实际只能放8个”的偏差。而直接在打印窗口内计算，样式环境完全匹配，结果更准确。

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