React-to-print打印页眉与内容重叠、页码失效问题求助

一、解决页眉与内容重叠问题 #

核心是通过打印专用CSS设置页面边距，同时给内容容器预留足够顶部空间，避免和默认页眉或自定义页眉重叠：

/* 打印专用样式 */
@media print {
  /* 设置页面边距，给页眉、页脚预留空间 */
  @page {
    margin: 2cm 1cm; /* 上下边距放大，容纳页眉和页码 */
  }

  /* 自定义固定页眉样式（如果组件内有自定义页眉） */
  .print-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 1.5cm; /* 高度与@page上边距匹配，避免重叠 */
    background: white;
    padding: 0.5cm;
    border-bottom: 1px solid #eee;
  }

  /* 给内容容器设置顶部边距，避开页眉区域 */
  .print-content {
    margin-top: 2cm; /* 大于等于页眉高度+预留间隙 */
    page-break-inside: avoid; /* 禁止内容在元素内部被拆分到两页 */
  }
}

二、实现自动页码功能 #

利用CSS计数器和打印页面的页脚区域，实现自动计算页码和总页数：

@media print {
  /* 初始化页码计数器 */
  body {
    counter-reset: page;
  }

  @page {
    /* 在页脚中间显示页码 */
    @bottom-center {
      content: "第 " counter(page) " 页 / 共 " counter(pages) " 页";
      font-size: 12px;
      color: #666;
    }
  }

  /* 每一页自动递增计数器 */
  .print-content > section {
    counter-increment: page;
  }
}

三、React组件配合修改 #

确保react-to-print的配置正确，打印内容的DOM结构和样式能正确关联：

import React, { useRef } from 'react';
import ReactToPrint from 'react-to-print';

const PrintableDocument = () => {
  const printRef = useRef();

  return (
    <div>
      <ReactToPrint
        trigger={() => <button>打印文档</button>}
        content={() => printRef.current}
        documentTitle="业务报表"
        // 可选：等待样式加载完成后再打印
        onBeforeGetContent={() => new Promise(resolve => setTimeout(resolve, 100))}
      />

      {/* 打印内容容器 */}
      <div ref={printRef} className="print-container">
        {/* 自定义页眉 */}
        <header className="print-header">XX公司业务报表</header>
        {/* 打印内容主体 */}
        <main className="print-content">
          {/* 示例长内容，模拟分页场景 */}
          {Array.from({ length: 60 }).map((_, idx) => (
            <p key={idx} className="content-line">报表内容行 {idx + 1}</p>
          ))}
        </main>
      </div>
    </div>
  );
};

export default PrintableDocument;

关键注意事项 #

• 所有打印专属样式必须包裹在@media print内，避免影响正常页面显示
• 自定义固定页眉必须设置background: white，防止被下方内容穿透
• 如需手动控制分页，可给对应元素添加page-break-after: always样式
• 确保react-to-print的content回调准确指向打印内容的DOM节点，不要包含打印按钮等无关元素

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