如何用CSS控制打印时页眉页脚显示（仅首页显示页眉）

要实现自定义打印页眉（仅首页显示）和页脚，需要通过CSS打印媒体查询结合@page伪类来控制，以下是针对你代码的具体修改：

步骤1：添加打印专用CSS #

在HTML的<head>标签内，@include('layouts.styles')之后添加以下打印样式：

<style media="print">
  /* 1. 禁用浏览器默认的页眉页脚 */
  @page {
    size: auto;
    margin: 0;
  }

  /* 2. 首页设置顶部边距，容纳自定义页眉 */
  @page :first {
    margin-top: 35mm; /* 根据你的header高度调整（你的header图片高120px≈31.75mm） */
  }

  /* 3. 非首页设置顶部边距，不需要页眉 */
  @page:not(:first) {
    margin-top: 10mm;
  }

  /* 4. 统一设置所有页面的左右、底部边距，容纳页脚 */
  @page {
    margin-left: 5mm;
    margin-right: 5mm;
    margin-bottom: 20mm;
  }

  /* 5. 自定义页眉：仅首页显示 */
  .header {
    position: absolute;
    top: 0;
    left: 5mm;
    right: 5mm;
  }

  /* 6. 分页后隐藏后续页面的页眉 */
  .page-break ~ .header {
    display: none;
  }

  /* 7. 自定义页脚：每页固定显示在底部 */
  .footer {
    position: fixed;
    bottom: 5mm;
    left: 5mm;
    right: 5mm;
  }

  /* 8. 隐藏打印按钮 */
  #printPage {
    display: none !important;
  }

  /* 9. 防止内容被页脚覆盖 */
  main {
    margin-bottom: 25mm;
  }

  /* 10. 表格跨页时自动重复表头（可选优化） */
  table thead {
    display: table-header-group;
  }

  /* 11. 重置body样式，避免干扰打印布局 */
  body {
    margin: 0;
    padding: 0;
  }
</style>

步骤2：（可选）手动控制分页位置 #

如果你的表格或内容需要强制分页，可以在需要分页的元素后添加一个带有page-break-after: always的容器，比如在<main>内的某个位置：

<div class="page-break" style="page-break-after: always;"></div>

关键说明 #

• 浏览器默认的页眉页脚通过@page { margin: 0 }彻底隐藏，转而使用你自定义的.header和.footer。
• 首页的页眉通过@page :first预留顶部边距，结合position: absolute固定在首页顶部；非首页通过@page:not(:first)缩小顶部边距，且后续页面的页眉会被自动隐藏。
• 页脚使用position: fixed固定在每页底部，确保每页都显示。
• 表格表头重复显示的样式是可选优化，解决跨页表格表头消失的问题。

修改后的完整HTML头部示例：

<head>
    @include('layouts.styles')
   
    <!-- 添加打印专用样式 -->
    <style media="print">
      /* 上述打印CSS代码 */
    </style>

    <script>
        const Print = () => {
            let printButton = document.getElementById("printPage");
            printButton.style.visibility = 'hidden';
            window.print();
            printButton.style.visibility = 'visible';
        }
    </script>
</head>

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