合同打印页分页效果和隐藏你不需要的内容

前言：

在合同页面开发中，大家有时候会遇到要打印的效果，在打印页会遇到一些常见的问题比如：打印的时候去掉导航菜单栏、页尾段落内容分隔不完美等等。如何解决这些问题呢，接下来我会分享给大家。

一：打印时去掉多余不想展示的内容

在页面中加media="print"的style样式标签，打印不想展示出来的内容就可以在这里隐藏掉了，

如果像不显示页头页尾的话就在这里加上@page这个样式了，具体代码示例如下图：

<style media="print">
@media print {
  @page {
    margin: 0;
  }
  .box {
    display: none;
  }
}
</style>

二、打印页分页效果

给需要分隔的模块加上.split，然后在模块后边加类为.pagebreak的div（记得他俩是平级关系非包含关系哦～）, 样式如下图：

<div class="split">
    XXXXXXXX
</div>
<div class="pagebreak"></div>
<style>
.pagebreak {
  display: block;
  clear: both;
}
.split {
  page-break-after: always;
}
</style>

以上就是我在工作中遇到打印页的问题以及解决方法，分享给大家。

大家有好的经验也一起分享出来哈，相互学习，共同进步～～