使用CSS页面范围规则实现差异化页眉页脚打印：解决难题

javascript

2024-03-17 11:54:47

用CSS页面范围规则实现差异化页眉页脚打印

引言

在打印HTML文档时，经常遇到这样的难题：页眉和页脚在所有页面上都显示，但我们可能只希望它们出现在特定页面上，例如正文页，而封面页和封底页则不需要。这篇文章将通过介绍CSS页面范围规则来解决这一问题。

什么是页面范围规则

CSS页面范围规则允许开发者针对打印页面的特定范围应用不同的样式。这对于控制页眉和页脚的显示非常有用。

使用页面范围规则实现差异化页眉页脚打印

要使用页面范围规则实现差异化页眉页脚打印，需要遵循以下步骤：

1. 标识目标页面

首先，确定需要排除页眉和页脚的页面，通常是封面页和封底页。

2. 创建CSS规则

为目标页面创建CSS规则，设置页眉和页脚的display属性为none。例如：

@page {
  margin: 1cm;
}

@page :first {
  margin-top: 2cm;
}

@page :last {
  margin-bottom: 2cm;
}

@media print {
  .header, .footer {
    display: none;
  }

  .page:first .header, .page:last .footer {
    display: block;
  }
}

3. 应用页面范围规则

将页面范围规则应用于目标页面，指示打印机在特定页面范围内应用不同的样式。

4. 调整页边距

根据需要调整目标页面的页边距，确保内容在打印时正确对齐。

示例代码

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css" />
  <style>
    .page-header, .page-footer,
    .page-header-space, .page-footer-space {
      height: 60px;
      background-color: white;
    }

    .page-header {
      position: fixed;
      top: 0;
      width: 100%;
    }

    .page-footer {
      position: fixed;
      bottom: 0;
      width: 100%;
    }

    #contentss {
      position: relative;
      z-index: 1000;
    }

    @media print {
      .pageBreakBefore {
        page-break-before: always;
      }

      .header {
        position: sticky;
        top: 0;
        background-color: #ffffff; /* You can adjust the background color as needed */
        padding: 10px;
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
      }

      .footer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #ffffff; /* You can adjust the background color as needed */
        padding: 10px;
        box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.2);
      }

      /* 排除封面页和封底页的页眉和页脚 */
      @page :first .header, @page :last .footer {
        display: block;
      }

      @page {
        margin: 1cm;
      }

      @page :first {
        margin-top: 2cm;
      }

      @page :last {
        margin-bottom: 2cm;
      }
    }
  </style>
</head>
<body>
  [[Body Contents]]
</body>
</html>