基于CSS实现带页眉页脚的多元素可打印页面技术求助

嘿，刚好我之前做过类似的需求，给你整理几个核心实现要点，一步步来搞定：

1. 基础打印样式重置 #

首先用@media print媒体查询隔离屏幕和打印样式，先做基础适配：

@media print {
  /* 隐藏屏幕专属元素，比如导航、侧边栏 */
  .navbar, .sidebar {
    display: none;
  }
  /* 重置页面边距，避免内容太靠边 */
  body {
    margin: 0;
    padding: 0;
    font-size: 12pt; /* 打印用pt单位更适配纸张 */
    line-height: 1.5;
  }
  /* 去掉背景色，节省墨水还避免打印异常 */
  * {
    background: transparent !important;
    color: black !important;
  }
}

2. 每页自动生成页眉页脚 #

用CSS的@page规则配合内置位置控制，这是纯CSS实现页眉页脚最靠谱的方案：

/* 定义纸张尺寸和边距，给页眉页脚留出空间 */
@page {
  size: A4; /* 可选letter/自定义尺寸，比如210mm 297mm */
  margin: 2cm 1.5cm;
  
  /* 页眉居中显示文档标题 */
  @top-center {
    content: "我的打印文档";
    font-weight: bold;
    font-size: 14pt;
  }
  
  /* 页脚左侧显示版权信息 */
  @bottom-left {
    content: "© 2024 我的团队";
    font-size: 10pt;
  }
  
  /* 页脚右侧自动生成页码 */
  @bottom-right {
    content: "第 " counter(page) " 页 / 共 " counter(pages) " 页";
    font-size: 10pt;
  }
}

/* 如果需要更复杂的页眉（比如带logo），用固定定位伪元素补充 */
@media print {
  body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 1.5cm;
    height: 1cm;
    width: 5cm;
    /* 这里可以用base64图片或者绝对路径引入logo */
    background: url('logo-mini.png') no-repeat center;
    background-size: contain;
  }
}

3. 优化内容分页，避免元素被截断 #

表格、列表、段落很容易被分页拆分，用这些属性来优化体验：

@media print {
  /* 避免表格、列表块被拆分到两页 */
  table, ul, ol, .content-section {
    page-break-inside: avoid;
  }
  
  /* 强制在大标题前分页，让章节更清晰 */
  h1, h2 {
    page-break-before: always;
  }
  
  /* 避免段落中间被拆分 */
  p {
    page-break-inside: avoid;
  }
  
  /* 长表格的表头每页重复显示 */
  thead {
    display: table-header-group;
  }
}

4. 元素的条件显示控制 #

如果需要根据页面情况控制元素显隐，可以结合分页特性实现：

@media print {
  /* 只在第一页显示的元素 */
  .only-first-page {
    display: block;
  }
  /* 第一页之外隐藏该元素 */
  @page :not(:first) {
    .only-first-page {
      display: none;
    }
  }
  
  /* 复杂场景（比如根据内容长度判断）可以配合少量JS辅助，比如检测内容高度是否超过一页，再动态添加类控制显隐 */
}

实用小技巧 #

• 测试打印样式直接用浏览器打印预览（Ctrl+P），不用真的打印浪费纸张
• 超长内容可以用page-break-after: always强制分页
• 图片要设置max-width: 100%，避免超出纸张宽度
• 用counter-reset: page 1可以自定义页码起始值

这些方案都是纯CSS实现，完全不需要依赖PDF工具，你可以根据自己的文档结构调整细节~

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