HTML页面打印设置：前10页无页眉，奇偶页页眉分左右显示

核心思路 #

利用CSS的@media print打印媒体查询结合@page规则，针对不同页码范围和奇偶页设置差异化的页眉样式。

具体实现代码 #

HTML结构

<!-- 打印专用页眉容器 -->
<div class="print-header">
  <img src="company-logo.png" alt="公司Logo" style="width: 120px; height: auto;" />
</div>

<!-- 页面主体内容 -->
<div class="page-content">
  <!-- 这里填充你的页面内容，需确保内容足够多以生成10页以上的打印页面 -->
  <p>页面内容示例...</p>
  <!-- 重复添加内容直到超过10页，方便测试 -->
</div>

CSS样式

/* 默认状态下隐藏打印页眉 */
.print-header {
  display: none;
}

@media print {
  /* 全局打印页面边距设置，为页眉预留空间 */
  @page {
    margin: 70px 25px 25px; /* 顶部边距用于放置页眉 */
  }

  /* 前10页：隐藏页眉，同时缩小顶部边距避免空白 */
  @page :nth-child(-n+10) {
    margin-top: 25px;
  }
  @page :nth-child(-n+10) .print-header {
    display: none;
  }

  /* 第11页及以后的页面：显示页眉 */
  @page :nth-child(n+11) {
    /* 保持顶部边距用于放置页眉 */
  }

  /* 定位页眉元素为固定位置，确保在打印页面顶部 */
  .print-header {
    display: block;
    position: fixed;
    top: 10px; /* 与@page的margin-top配合调整位置 */
    width: 120px;
    height: auto;
  }

  /* 第11页及以后的奇数页：页眉靠右 */
  @page :nth-child(n+11):odd {
    .print-header {
      right: 25px;
      left: auto;
    }
  }

  /* 第11页及以后的偶数页：页眉靠左 */
  @page :nth-child(n+11):even {
    .print-header {
      left: 25px;
      right: auto;
    }
  }

  /* 可选：避免内容被页眉覆盖，可给内容添加上边距 */
  .page-content {
    margin-top: 0;
  }
}

另一种实现方式（使用@page的区域内容） #

如果不想用固定定位元素，也可以直接通过@page的顶部区域插入Logo：

@media print {
  @page {
    margin: 70px 25px 25px;
  }

  /* 前10页不显示页眉 */
  @page :nth-child(-n+10) {
    margin-top: 25px;
    @top-left { content: ""; }
    @top-right { content: ""; }
  }

  /* 第11页及以后的奇数页：右上角显示Logo */
  @page :nth-child(n+11):odd {
    @top-right {
      content: url(company-logo.png);
      width: 120px;
      height: auto;
    }
  }

  /* 第11页及以后的偶数页：左上角显示Logo */
  @page :nth-child(n+11):even {
    @top-left {
      content: url(company-logo.png);
      width: 120px;
      height: auto;
    }
  }
}

注意事项 #

• 测试时需确保页面内容足够多，能生成10页以上的打印预览页面。
• 不同浏览器的打印样式支持略有差异，建议在Chrome、Edge、Firefox等主流浏览器中测试验证。
• 调整@page的margin值和页眉元素的top/left/right值时，要避免页眉与页面内容重叠。

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