前端打印设置相关

一、打印内容

不打印可以设置display:none,其他打印样式可在@media print 单独设置

@media print {
  .hidden-print {
    display: none !important;
  }
}

二、打印边距设置

边距设置可设置页眉页脚显示隐藏，

  @page{
    // 只显示页码，根据实际内容调整，可根据浏览器打印预览设置边距设置修改选项查看
    margin:  5mm 13mm 0 4mm!important;
    size: landscape; /*portrait： 纵向打印,  landscape: 横向*/

    // orphans属性指定必须留在页面底部的段落的最小行数。
    // widows属性指定必须留在页面顶部的段落的最小行数。
    // 这是在每页底部创建 4 行和在顶部创建 3 行的示例 -
    orphans:4; widows:3;
  }

其他page设置
 

@page {  // 每个打印页设置
  margin: 1cm;
}

@page :first { // 针对第一页设置
  margin: 2cm;
}

@page :left{ // 对打印文档的左侧页设置CSS样式
  margin: 2cm;
}

@page :right{ // 对打印文档的右侧页设置CSS样式
  margin: 2cm;
}

三、设置打印分页相关 

应用于：position 值为 relative 或 static 的非浮动块级元素。绝对定位和固定定位无效

page-break-before元素在指定元素前添加分页符。该css使用后内容始终位于页前

<div style="page-break-before:always">&nbsp;</div>

page-break-after 属性设置元素后的 page-breaking 行为。

page-break-inside属性用于设置是否在指定元素中插入分页符

 // 避免图片被截断
 img{
    page-break-after: always!important;
    page-break-inside: avoid!important;
  }

四、页眉页脚自定义设置

参考如何从浏览器打印重复标题

<table>
  //页眉
  <thead>
    <tr>
      <th style="position: fixed;top: 0;">
        <div style="width: 50%;height: 100%;">
          <img style="width: 100%;height: 100%"/>
        </div>
      </th>
    //页脚
  <tfoot>
  <tr>
    <td style="position: fixed;bottom: 0;font-size: 14px;">
      <p>页脚</p>
    </td>
  </tr>
  </tfoot>
</table>

css分页计数器

// 定义重置计数器标签
h1 {counter-reset:subsection;}

h2:before 
{
// 定义计数器计算标签
    counter-increment:subsection;
    content: counter(subsection) " ";
}