前端实现打印html页面

确认打印布局

打印方法是打印body里面的数据，如果想打印部分数据，则需要将打印布局放在body里面，或者将不需要的布局隐藏。
将布局渲染到body会导致页面重新渲染，存在问题，所以可以用css来解决，设置后打印预览就不会出现不需要的布局了。

<div id='printNone'>不需要打印的数据</div>
<div>需要打印的数据</div>

<style>
@media print {
  #printNone {
    display: none;
  }
}
</style>

打印预览排版

打印时需要自定义换页，同样可以使用css来完成
注意：break-after只有在块级元素上生效
break-after属性参考文档

//break-after定义换页位置
.print-style {
  break-after: page;
}

去掉打印页眉页脚

在css里设置@page属性，打印预览时不会出现页眉页脚，并且预览时对页眉页脚选择项也会消失。如果需要用户自己选择则不用设置。

@page {
  size: auto;  /* auto is the initial value */
  margin: 0; /* this affects the margin in the printer settings */
}

调用打印方法

print(){
    window.print();
}