通过 css 控制 window.print 的样式
打印页面隐藏打印按钮
在 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>

浙公网安备 33010602011771号