HTML实现类PDF页面：文本超出页面高度时如何自动分页？

你可以通过CSS分页规则结合HTML转PDF工具来实现需求，核心是用CSS定义页面格式，让工具自动处理文本溢出分页，以下是具体实现步骤：

1. 核心CSS配置（适配指定页面格式） #

根据你的页面尺寸要求，先通过@page规则定义页面尺寸、边距，同时设置内容的分页行为：

/* 定义页面尺寸与边距，替换为你实际的页面参数 */
@page {
  size: A4; /* 若为自定义尺寸，可写为 size: 210mm 297mm; */
  margin: 20mm 15mm; /* 上下左右边距，对应内容区域留白，需匹配你的页面格式 */
  
  /* 可选：添加页眉页脚（保持页面统一格式） */
  @top-center { content: "报告名称"; }
  @bottom-right { content: "第 " counter(page) " 页"; }
}

/* 全局样式重置，避免默认样式干扰 */
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

/* 章节容器：避免章节被拆分到两页 */
.chapter {
  margin-bottom: 2em;
  page-break-inside: avoid;
}

/* 章节标题：禁止标题单独留在页尾 */
.chapter-title {
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 1em;
  page-break-after: avoid;
}

/* 内容文本：设置行高，工具会自动处理溢出分页 */
.chapter-text {
  line-height: 1.6;
}

2. 从JSON数据生成HTML结构 #

用JavaScript将你的JSON数据渲染成符合CSS规则的HTML：

const reportData = [
  {
    "title": "Chapter 1",
    "text": "Some large text"
  },
  {
    "title": "Chapter 2",
    "text": "Some large text"
  }
];

// 生成HTML字符串
function buildReportHtml(data) {
  const chaptersHtml = data.map(chapter => `
    <div class="chapter">
      <h2 class="chapter-title">${chapter.title}</h2>
      <div class="chapter-text">${chapter.text.replace(/\n/g, '<br>')}</div>
    </div>
  `).join('');

  return `
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <style>/* 插入上面的CSS代码 */</style>
    </head>
    <body>${chaptersHtml}</body>
    </html>
  `;
}

// 生成最终HTML内容
const htmlContent = buildReportHtml(reportData);

3. 用工具生成PDF（自动分页） #

方案一：Puppeteer（Headless Chrome） #

Node.js环境下的工具，支持完整的CSS分页规则：

const puppeteer = require('puppeteer');
const fs = require('fs');

async function generatePdf(html) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  // 设置页面视口，与@page尺寸匹配
  await page.setViewport({ width: 794, height: 1123 }); // A4对应像素尺寸
  
  await page.setContent(html);
  
  // 生成PDF，启用背景打印（若页面有背景样式）
  const pdfBuffer = await page.pdf({
    format: 'A4', // 或自定义尺寸：width: '210mm', height: '297mm'
    printBackground: true,
    margin: { top: '20mm', right: '15mm', bottom: '20mm', left: '15mm' } // 与CSS边距一致
  });
  
  await browser.close();
  fs.writeFileSync('report.pdf', pdfBuffer);
}

// 执行生成
generatePdf(htmlContent);

方案二：wkhtmltopdf（开源命令行工具） #

1. 将生成的HTML保存为report.html文件
2. 执行命令：

wkhtmltopdf --page-size A4 --margin-top 20mm --margin-right 15mm --margin-bottom 20mm --margin-left 15mm --enable-local-file-access report.html report.pdf

关键注意事项 #

• 确保@page规则的尺寸、边距与PDF工具的设置完全一致，避免格式偏移
• 对图片、表格等元素添加page-break-inside: avoid，防止内容断裂
• 大段文本无需手动拆分，工具会自动根据内容区域高度触发分页

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