如何在React项目中仅为单个组件应用@page CSS规则

核心思路 #

通过动态给body添加打印专属类，配合CSS变量和媒体查询，让@page的边距设置只作用于目标表格的打印场景，同时给表格容器添加底部内边距避免内容覆盖页脚。

具体实现步骤 #

1. 添加全局自定义CSS #

在项目的全局样式文件（比如src/index.css或src/global.css）中添加以下代码，补充Tailwind的打印样式：

:root {
  --print-footer-height: 50px;
  --print-page-margin-bottom: 0;
}

@media print {
  /* 默认隐藏打印页脚 */
  .print-footer {
    display: none;
  }

  /* 基础页面边距设置 */
  @page {
    margin: 1cm;
    margin-bottom: var(--print-page-margin-bottom);
  }

  /* 仅当body带有print-table-page类时，应用表格打印专属样式 */
  body.print-table-page {
    --print-page-margin-bottom: var(--print-footer-height);
  }

  body.print-table-page .table-container {
    /* 给表格容器加底部内边距，匹配页脚高度 */
    padding-bottom: var(--print-footer-height);
  }

  body.print-table-page .print-footer {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--print-footer-height);
    background-color: #fff;
    border-top: 1px solid #eee;
    text-align: center;
    line-height: var(--print-footer-height);
  }

  /* 自动生成页码（可选） */
  body.print-table-page {
    counter-reset: page;
  }

  body.print-table-page .print-footer::after {
    counter-increment: page;
    content: "第 " counter(page) " 页";
  }
}

2. React组件中处理打印逻辑 #

在长表格组件中，通过按钮触发打印，并动态控制body类的添加/移除：

import { useEffect } from 'react';

const LongTable = () => {
  // 触发打印时添加专属类
  const handlePrint = () => {
    document.body.classList.add('print-table-page');
    window.print();
  };

  // 打印完成后移除专属类，避免影响其他页面
  useEffect(() => {
    const cleanUpPrintClass = () => {
      document.body.classList.remove('print-table-page');
    };
    window.addEventListener('afterprint', cleanUpPrintClass);
    return () => window.removeEventListener('afterprint', cleanUpPrintClass);
  }, []);

  return (
    <div className="table-container p-4">
      {/* 渲染API返回的表格内容 */}
      <table className="w-full border-collapse">
        <thead>
          <tr className="bg-gray-100">
            <th className="border p-2">列1</th>
            <th className="border p-2">列2</th>
            {/* 更多表头列 */}
          </tr>
        </thead>
        <tbody>
          {/* 示例：循环渲染表格行 */}
          {Array.from({ length: 50 }).map((_, idx) => (
            <tr key={idx}>
              <td className="border p-2">数据{idx+1}</td>
              <td className="border p-2">内容{idx+1}</td>
            </tr>
          ))}
        </tbody>
      </table>

      {/* 打印专属页脚 */}
      <div className="print-footer">表格打印页脚 - </div>

      {/* 打印按钮 */}
      <button 
        onClick={handlePrint}
        className="mt-6 px-4 py-2 bg-blue-600 text-white rounded"
      >
        打印表格
      </button>
    </div>
  );
};

export default LongTable;

关键说明 #

• 只有当用户点击该表格的打印按钮时，body才会被添加print-table-page类，此时@page的底部边距和页脚样式才会生效，不会影响项目中其他页面的打印。
• 表格容器的padding-bottom与页脚高度一致，确保表格最后一行内容不会被固定定位的页脚覆盖。
• 自动页码通过CSS计数器实现，无需JS额外处理，兼容性更好。

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