React.js中使用jsPDF的pdf.html()实现内容自动分页防重叠

核心问题分析 #

使用renderToString转换React组件为字符串会丢失部分样式计算和动态内容状态，导致jsPDF无法正确识别元素的实际尺寸，进而引发分页失效、内容重叠。同时默认的jsPDF配置未针对长内容做优化，也会加重这类问题。

解决方案步骤 #

1. 替换renderToString为DOM节点引用

直接传递组件的DOM节点给jsPDF，确保样式和内容完整：

import { useRef, useEffect, useState } from 'react';
import jsPDF from 'jspdf';
import ReportTemplate from './ReportTemplate';

export const PdfGenerator = ({ printType, data }) => {
  const reportRef = useRef(null);
  const [isContentReady, setIsContentReady] = useState(false);

  // 确保数据和组件渲染完成
  useEffect(() => {
    if (data) {
      setIsContentReady(true);
    }
  }, [data]);

  useEffect(() => {
    if (reportRef.current && isContentReady) {
      generatePdf({
        element: reportRef.current,
        fileName: 'docs.pdf'
      });
    }
  }, [printType, isContentReady]);

  return (
    <div ref={reportRef} style={{ visibility: 'hidden', position: 'absolute' }}>
      <ReportTemplate
        title='Example Pdf file'
        type={printType}
        data={data}
      />
    </div>
  );
};

2. 优化generatePdf函数配置

调整单位、页边距和自动分页规则：

import jsPDF from 'jspdf';

export const generatePdf = ({ element, fileName }) => {
  const pdf = new jsPDF({
    format: 'a4',
    unit: 'mm', // 使用物理单位避免尺寸偏差
    orientation: 'portrait'
  });

  pdf.html(element, {
    callback(doc) {
      doc.save(fileName);
    },
    margin: [10, 10, 10, 10], // 设置页边距防止内容贴边
    autoPaging: 'smart', // 智能分页，适配文本和元素
    x: 0,
    y: 0
  });
};

3. 添加CSS分页控制规则

在ReportTemplate的样式中添加分页相关CSS，避免元素被拆分或强制分页：

/* 容器级避免跨页拆分 */
.report-template-container {
  page-break-inside: avoid;
}

/* 强制分页的元素 */
.page-break-after {
  page-break-after: always;
}

/* 表格特殊处理 */
.report-table {
  page-break-inside: avoid;
}

.report-table tr {
  page-break-inside: avoid;
}

/* 图片确保完整显示 */
.report-image {
  page-break-inside: avoid;
}

额外注意事项 #

• 如果组件包含异步加载的内容（如图片），需等待内容加载完成后再调用generatePdf，可通过onLoad事件或状态判断实现。
• 避免使用position: fixed或absolute的元素，这类元素可能会在分页时重复出现在每页。

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