如何在React考试打印应用中实现类MS Word分页及跨页问题处理？

嘿，这个需求我之前做类似的打印试卷系统时刚好碰到过，给你分享几个实操性强的思路和具体实现步骤，应该能帮你解决问题：

本质上是动态计算内容高度，把长问题拆分成多个可容纳的片段，再对应生成Page组件，同时在跨页的位置自动插入续题提示。关键是要准确获取内容高度，以及处理好拆分逻辑和提示的显示时机。

1. 封装高度测量工具（Hook/组件） #

首先得能准确获取Question组件或其内部片段渲染后的实际高度。可以写一个自定义Hook来做这件事：

import { useState, useLayoutEffect, useRef } from 'react';

export const useElementHeight = () => {
  const elementRef = useRef(null);
  const [height, setHeight] = useState(0);

  useLayoutEffect(() => {
    if (elementRef.current) {
      // 用offsetHeight获取元素实际高度（包含padding，不包含border/margin）
      setHeight(elementRef.current.offsetHeight);
    }
  }, [elementRef.current]);

  return [elementRef, height];
};

在Question组件里，你可以给需要测量的内容容器加上这个ref，就能拿到它的高度了。

2. 确定单页可容纳的最大高度 #

A4纵向的实际打印可用高度需要先算好：

• 默认打印DPI是96的话，A4纸纵向像素高度是 297mm / 25.4mm * 96 ≈ 1123px
• 减去上下页边距（比如各20mm），可用高度大概是 (297-40)/25.4*96 ≈ 937px
  把这个值设为常量，或者做成可配置的参数。

3. 实现长问题的拆分逻辑 #

这里的关键是把Question拆成可分割的小单元（比如段落、小题、图片块），避免把一个完整的元素劈成两半。具体步骤：

• 先把每个Question的内容拆成sections数组（比如每个小题、每个段落都是一个section）
• 逐个累加sections的高度，直到加上下一个section就超过单页最大高度：
  • 此时把当前已累加的sections作为当前Page的内容，底部加上「本题续接下一页」提示
  • 剩下的sections放到新Page里，顶部加上「第X题（续）」提示
• 循环这个过程，直到该Question的所有sections都被分配到对应的Page里

4. 动态生成Page组件 #

写一个父组件（比如PaperRenderer）来处理所有Question的拆分和Page生成，伪代码如下：

const PaperRenderer = ({ questions }) => {
  const PAGE_MAX_HEIGHT = 937; // 预计算的单页可用高度
  const [pages, setPages] = useState([]);

  useEffect(() => {
    const generatedPages = [];
    let currentPageItems = [];
    let currentPageTotalHeight = 0;

    questions.forEach((question, qIdx) => {
      const questionNum = qIdx + 1;
      let remainingSections = [...question.sections]; // 假设question有sections字段
      let isQuestionContinued = false;

      while (remainingSections.length > 0) {
        // 先获取当前section的高度（这里可以用之前的useElementHeight，或者预计算文本高度）
        const sectionHeight = getSectionHeight(remainingSections[0]);
        // 加上提示的高度（比如「续题」提示大概占40px）
        const additionalHeight = isQuestionContinued ? 40 : 0;

        if (currentPageTotalHeight + sectionHeight + additionalHeight > PAGE_MAX_HEIGHT) {
          // 当前页放不下，先提交当前页
          if (currentPageItems.length > 0) {
            generatedPages.push({ items: [...currentPageItems] });
          }
          // 开启新页，添加续题头部
          currentPageItems = [{
            ...question,
            sections: [remainingSections[0]],
            showHeader: true,
            headerText: `第${questionNum}题（续）`,
            showFooter: remainingSections.length > 1
          }];
          currentPageTotalHeight = sectionHeight + 40; // 加上头部提示高度
          remainingSections.shift();
          isQuestionContinued = true;
        } else {
          // 当前页可以放下，加入当前页
          currentPageItems.push({
            ...question,
            sections: [remainingSections[0]],
            showHeader: isQuestionContinued,
            headerText: isQuestionContinued ? `第${questionNum}题（续）` : '',
            showFooter: remainingSections.length > 1
          });
          currentPageTotalHeight += sectionHeight + additionalHeight;
          remainingSections.shift();
        }
      }
    });

    // 提交最后一页
    if (currentPageItems.length > 0) {
      generatedPages.push({ items: currentPageItems });
    }

    setPages(generatedPages);
  }, [questions]);

  return (
    <div className="paper-wrapper">
      {pages.map((page, idx) => (
        <Page key={idx} size="A4" layout="portrait">
          {page.items.map((item, itemIdx) => (
            <div key={itemIdx} className="question-block">
              {item.showHeader && <div className="continuation-header">{item.headerText}</div>}
              <Question question={item} />
              {item.showFooter && <div className="continuation-footer">本题续接下一页</div>}
            </div>
          ))}
        </Page>
      ))}
    </div>
  );
};

• 样式一致性：屏幕样式和打印样式要保持一致，否则测量的高度会不准。可以用@media print来统一设置字体、边距等样式。
• 动态内容处理：如果Question里有图片、异步加载的内容，要等所有内容加载完成后再测量高度，否则会导致拆分错误。可以监听图片的onLoad事件，或者用占位符高度。
• 性能优化：如果试卷有很多问题，重复测量高度可能会影响性能，可以用useMemo缓存已经计算过的section高度，或者用虚拟渲染只处理当前可见的内容。
• 特殊内容处理：对于无法拆分的超长内容（比如大表格），可以设置最小高度提示用户调整，或者自动缩放（但缩放可能影响打印清晰度）。

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