通过 css 控制 window.print 的样式

打印页面隐藏打印按钮

1 2	`在 button 按钮加一个` `class` `样式` `class="print-button-container"`

　　调用 window.print 方法的页面加以下css

<style scope lang="scss">
@media print {
  .table-print-disable {
    display: none;
  }
  @page {
    /* 纵向打印 */
    size: portrait;
 
    /* 横向打印 */
    //size: landscape;
 
    /* 去掉页眉页脚*/
    margin-top: 0;
    margin-bottom: 0;
  }
  /* 告诉浏览器在渲染它时不要对框进行颜色或样式调整 */
  * {
    -webkit-print-color-adjust: exact !important;
    -moz-print-color-adjust: exact !important;
    -ms-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
 
  /*打印不显示打印按钮*/
  .print-button-container {
    display: none !important;
  }
 
  /* 伪类 :first 用于匹配到文档的第一页, 首页上页边距设置为 10cm */
  @page :first {
    margin-top: 10cm;
  }
 
  /* 通过分别设置左页和右页不同的左右页面距，为装订边留出更多的空间 */
  /**/
  @page :left {
    margin-left: 2.5cm;
    margin-right: 2.7cm;
  }
  @page :right {
    margin-left: 2.7cm;
    margin-right: 2.5cm;
  }
}
</style>