使用ReactToPrint打印React组件时，如何隐藏默认页脚并保留页眉？

我正在使用ReactToPrint包将自定义React函数式组件打印为PDF，目前功能正常，但想修改打印对话框里的文档页脚（默认会显示带高亮链接的内容）。需求是：

• 要么完全移除页脚
• 要么隐藏页脚里的高亮链接
  注意：不想取消打印对话框的「页眉页脚」勾选框，因为要保留页眉，只处理页脚。
  已经查过ReactToPrint的相关问题，主要尝试了给组件传自定义CSS，但没解决问题。

方法1：通过打印媒体查询隐藏默认页脚 #

浏览器的默认打印页眉页脚是由自身生成的，可借助CSS的@media print规则来隐藏。给打印目标组件添加如下样式：

@media print {
  /* 把页边距底部设为0，让浏览器默认页脚失去显示空间 */
  @page {
    margin-bottom: 0;
  }
  /* 若需自定义页脚，可在打印组件内添加对应元素，用固定定位固定在底部 */
  .custom-print-footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    font-size: 12px;
    padding: 4px;
    color: #666;
  }
}

这种方式直接通过页边距挤压掉默认页脚的显示区域，同时支持自定义页脚覆盖原有位置。

方法2：利用ReactToPrint钩子动态注入样式 #

如果是函数式组件，可以用useReactToPrint提供的钩子，在打印前后动态添加/移除样式：

import { useReactToPrint } from 'react-to-print';

const MyPrintableComponent = () => {
  const printTrigger = useReactToPrint({
    content: () => document.getElementById('print-content'),
    beforePrint: () => {
      // 创建临时样式标签注入页面
      const printStyle = document.createElement('style');
      printStyle.textContent = `
        @media print {
          @page { margin-bottom: 0; }
        }
      `;
      document.head.appendChild(printStyle);
      // 暂存样式标签，方便打印后清理
      window._printTempStyle = printStyle;
    },
    afterPrint: () => {
      // 打印完成后移除临时样式
      if (window._printTempStyle) {
        document.head.removeChild(window._printTempStyle);
        delete window._printTempStyle;
      }
    }
  });

  return (
    <div>
      <button onClick={printTrigger}>打印PDF</button>
      <div id="print-content">
        {/* 这里是你的打印内容 */}
      </div>
    </div>
  );
};

方法3：禁用默认页眉页脚后自定义页眉 #

如果前两种方法无效，也可以取消打印对话框的「页眉页脚」选项，然后在组件内自定义页眉来替代默认页眉：

@media print {
  .custom-print-header {
    position: fixed;
    top: 0;
    width: 100%;
    text-align: center;
    font-size: 14px;
    padding: 8px;
    border-bottom: 1px solid #ddd;
  }
  /* 给内容添加上边距，避免被自定义页眉遮挡 */
  .print-content-wrapper {
    margin-top: 45px;
  }
}

这种方式能完全掌控页眉页脚的样式，同时满足保留页眉、隐藏默认页脚的需求。

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