JS 前端打印功能--原生写法（分页处理、样式调整、隐藏打印滚动条）

先直接上代码 不借助JS插件
1. css样式代码块

     	p,
        textarea,
        span,
        table,
        input {
    
    
            page-break-inside: avoid;
        }

关键属性 page-break-inside: avoid 判定分页检查点位置 属性详细值参照 MDN

2.打印预览/输出时的样式

    <style type="text/css" media="print">
        body {
    
    
            height: auto;
            break-inside: avoid;
            line-height: 1.6;
            -webkit-print-color-adjust: exact;
            -moz-print-color-adjust: exact;
            -ms-print-color-adjust: exact;
        }

        body *::-webkit-scrollbar {
    
    
            display: none;
        }
        p,
        textarea,
        span,
        table,
        input {
    
    
            page-break-inside: avoid;
        }
    </style>

关键点

1. 分页的关键点 height: auto;
2. 页面打印时规避节点不被截断的关键点 page-break-inside: avoid;
3. 打印背景色样式的关键点 -webkit-print-color-adjust: exact;
4. 去掉打印滚动条的关键点 *body ::-webkit-scrollbar

3.打印API

window.print();

打印结果预览