打印页面时怎样自定义打印页眉页脚或者去掉眉页脚?

108 阅读1分钟

"```markdown 打印页面时,可以通过CSS的@page规则来自定义打印页眉和页脚,或者完全去掉它们。以下是一些常见的方法:

自定义打印页眉和页脚

使用CSS的@page规则

@page {
  margin: 1cm; /* 设置页面边距 */
  size: A4; /* 设置页面大小,可以是A4、letter等 */
  /* 定义页眉 */
  @top-center {
    content: \"页眉内容\";
  }
  /* 定义页脚 */
  @bottom-right {
    content: \"页脚内容\";
  }
}

使用HTML和CSS组合

<style>
@media print {
  .print-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    background-color: #f0f0f0;
    text-align: center;
    line-height: 50px;
  }
  .print-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background-color: #f0f0f0;
    text-align: center;
    line-height: 50px;
  }
}
</style>

<div class=\"print-header\">页眉内容</div>
<div class=\"print-footer\">页脚内容</div>

去掉打印页眉和页脚

使用CSS的@page规则

@page {
  size: auto; /* 自动页面大小 */
  margin: 0; /* 设置页边距为0 */
}

使用CSS的@media print媒体查询

@media print {
  @page {
    size: auto; /* 自动页面大小 */
    margin: 0; /* 设置页边距为0 */
  }
}

这些方法可以根据需要自定义打印页面的布局,包括添加自定义的页眉和页脚,或者完全去除默认的页眉和页脚。