window.print打印

<div>
    <h1>window.print默认打印</h1>
    <div class="page-break">内容一</div>
    <div class="page-break">内容二</div>
    <div class="page-break">内容三</div>
    <button class="no-print" onclick="print()">打印</button>
    <ul>
        <li>οnclick="print()" print是window自带方法</li>
        <li>默认直接打印出body下面的所有dom</li>
        <li>利用@media print给打印设置样式，这个媒体查询只会针对打印效果</li>
        <li>利用CSS的page-break-after属性给打印做出精确分页，即内容1，2，3都会是单独的一份</li>
        <li>局部打印,隐藏打印内容,设置no-print样式为visibility或者display，visibility会留出空白，display不会</li>
        <li>除了css控制局部打印外，还有一种是新窗口打印，单独设置打印内容，然后再直接调用print方法打印</li>
        <li style="color:#409eff;">上面都是介绍的原生的，一般在实际项目中，都是使用的开源或者第三方的js</li>
    </ul>
</div>

@media print{
    .page-break{
        color: red;
        page-break-after: always;
        /*
        在元素后插入分页符。
        */
    }
    /* 局部打印 */
    .no-print{
        /* visibility: hidden; */
        display: none;
    }
}

在线预览：https://jsrun.net/zQUKp