嘿，针对你这个需求，我结合你给出的HTML结构，整理了一套能直接用的实现方案，分两步走：

一、先搞定CSS打印布局（核心！） #

首先用CSS的打印媒体查询，把页面固定成标准A4尺寸，同时设置好分页规则，确保打印预览里的效果和预期一致：

/* 清除默认样式，避免干扰 */
body {
  margin: 0;
  padding: 0;
}

/* 包裹所有页面的容器，居中显示 */
.book {
  width: 210mm;
  margin: 0 auto;
}

/* 单个A4页面的基础样式 */
.page {
  width: 210mm;
  height: 297mm;
  margin: 0 0 10mm 0; /* 给页面之间留个间隙，方便预览 */
  padding: 15mm; /* 页面内边距，你可以根据需求调 */
  box-sizing: border-box;
  page-break-after: always; /* 强制每个page后面自动分页 */
  background: #fff; /* 打印时确保背景是白色 */
  box-shadow: 0 0 5px rgba(0,0,0,0.1); /* 预览时加个阴影，更像真实纸张 */
}

/* 内容容器，用来装数据库来的内容 */
.subpage {
  min-height: 100%;
  position: relative;
}

/* 专门给打印场景做的样式优化 */
@media print {
  @page {
    size: A4;
    margin: 0;
  }
  body {
    background: #fff;
  }
  .page {
    margin: 0;
    box-shadow: none; /* 打印时去掉阴影，省墨 */
  }
}

二、动态内容填充+自动分页的JS逻辑 #

接下来用JS处理从数据库拿的内容，当内容超过单页高度时，自动拆分内容并新增页面：

// 这里模拟从数据库获取内容，实际项目里换成你的接口请求就行
const getContentFromDB = async () => {
  // 比如用fetch请求：
  // const res = await fetch('/api/get-print-content');
  // return await res.text();
  
  // 临时模拟长内容
  return `这里是从数据库获取的长文本内容，可能会超过单页高度：
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
（你可以复制更多长文本或者插入图片链接来测试分页效果）`;
};

// 初始化分页逻辑
async function initPrintPage() {
  const book = document.querySelector('.book');
  let currentSubpage = document.querySelector('.subpage');
  
  // 从数据库获取内容
  const content = await getContentFromDB();
  currentSubpage.textContent = content; // 如果有HTML内容，用innerHTML代替textContent
  
  // 自动分页处理函数
  function splitPageIfNeeded() {
    const pageAvailableHeight = document.querySelector('.page').offsetHeight;
    const contentHeight = currentSubpage.scrollHeight;
    
    // 如果内容高度超过页面可容纳高度，就拆分
    if (contentHeight > pageAvailableHeight) {
      // 创建临时元素来找到内容的拆分点
      const tempEl = document.createElement('div');
      tempEl.style.cssText = `width: ${currentSubpage.offsetWidth}px; position: absolute; visibility: hidden; padding: ${getComputedStyle(currentSubpage).padding};`;
      document.body.appendChild(tempEl);
      
      const contentWords = currentSubpage.textContent.split(' ');
      let currentText = '';
      let splitIndex = 0;
      
      // 逐词测试，找到刚好不溢出的位置
      for (let i = 0; i < contentWords.length; i++) {
        tempEl.textContent = currentText + ' ' + contentWords[i];
        if (tempEl.offsetHeight > pageAvailableHeight) {
          splitIndex = i;
          break;
        }
        currentText += ' ' + contentWords[i];
      }
      
      // 更新当前页面的内容
      currentSubpage.textContent = currentText.trim();
      // 剩余要放到新页面的内容
      const remainingContent = contentWords.slice(splitIndex).join(' ');
      
      // 创建新的A4页面和内容容器
      const newPage = document.createElement('div');
      newPage.className = 'page';
      const newSubpage = document.createElement('div');
      newSubpage.className = 'subpage';
      newSubpage.textContent = remainingContent;
      newPage.appendChild(newSubpage);
      book.appendChild(newPage);
      
      // 递归检查新页面的内容是否还需要拆分
      currentSubpage = newSubpage;
      splitPageIfNeeded();
      
      // 清理临时元素
      document.body.removeChild(tempEl);
    }
  }
  
  // 执行分页
  splitPageIfNeeded();
}

// 页面加载完成后初始化
window.addEventListener('load', initPrintPage);

额外提示（处理图片的情况） #

如果你的数据库内容包含图片，记得给图片加这个样式，防止溢出或者被拆分到两页：

.subpage img {
  max-width: 100%;
  height: auto;
  page-break-inside: avoid; /* 避免图片被拆在两页之间 */
}

这样操作下来，就能实现：A4标准尺寸打印、从数据库动态填充内容、内容超过页底自动新增页面的全部需求啦！

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