浏览器原生打印print

需求是查看的时候要对照显示内勤和客户填写信息，点击打印的时候只打印内勤的。打印页面关闭之后，还是显示对照信息。

直接上代码:

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">body {
    background-color: #FFF;
}

table {
    margin: auto;
    margin-top: 20px;
    margin-bottom: 100px;
    border-collapse: collapse;
}

/*打印时的样式,display:none的时候打印不显示*/
@media {
    .no-print {
        display: none;
    }
}

table.tableizer-table {
    font-size: 12px;
    width: 880px;
    font-family: Arial, Helvetica, sans-serif;
}

.tableizer-table td {
    padding: 4px;
    margin: 3px;
    border: 1px solid #CCC;
}


.tableizer-table th {
    padding: 10px;
    margin: 3px;
    border: 1px solid #CCC;
}

.juzhong {
    text-align: center;
    font-weight: bold;
}</style>
<p><button id="click_print" class="no-print">打印</button></p>
<table class="tableizer-table">
    <thead>
        <tr>
            <th colspan="4"style="font-size:18px">专利技术需求确认书</h2>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>客户：</td>
            <td> xxxx</td>
            <td>合同编号：</td>
            <td>与本硬件产品相同的所有订单</td>
        </tr>
        <tr>
            <td>订单数量：</td>
            <td>以实际合同对应的订单信息为准</td>
            <td>客户料号：</td>
            <td>以实际合同对应的订单信息为准</td>
        </tr>
        <tr>
            <td>客户单号：</td>
            <td>以实际合同对应的订单信息为准</td>
            <td>客户机型：</td>
            <td>以实际合同对应的订单信息为准</td>
        </tr>
        <tr>
            <td>客户品牌：</td>
            <td>以实际合同对应的订单信息为准</td>
            <td>客户批号：</td>
            <td>以实际合同对应的订单信息为准</td>
        </tr>
        <tr>
            <td>默认国家：</td>
            <td>以实际合同对应的订单信息为准</td>
            <td>产品代码：</td>
            <td>002.002.0048412</td>
        </tr>
        <tr>
            <td>产品名称：</td>
            <td>T.MS6308.U701B<1275691.0022.0113>
            </td>
            <td>主芯片：</td>
            <td>MSD6308RTEM-SW,MST6M50DV</td>
        </tr>
        <tr>
            <td colspan="4"> </td>
        </tr>
        <tr>
            <td class="juzhong">来源</td>
            <td class="juzhong change_colspan">内勤</td>
            <td colspan="2" class="juzhong no-print">客户</td>
        </tr>
        <tr>
            <td>专利技术授权客户：</td>
            <td class="change_colspan">取xxxx订单: 专利授权客户</td>
            <td colspan="2" class="no-print">取xxxx订单: 专利授权客户</td>
        </tr>
        <tr>
            <td>专利技术缴费方：</td>
            <td class="change_colspan">取xxxx订单: 专利收费项</td>
            <td colspan="2" class="no-print">取xxxx订单: 专利授权客户</td>
        </tr>
        <tr>
            <td>专利授权技术选项：</td>
            <td class="change_colspan">取xxxx订单: 专利授权技术选项DD/aaa-HD/MSS</td>
            <td colspan="2" class="no-print">取xxxx订单: 专利授权客户</td>
        </tr>
        <tr>
            <td>专利授权技术备注：</td>
            <td class="change_colspan">取xxxx订单: 专利授权客户</td>
            <td colspan="2" class="no-print">取xxxx订单: 专利授权客户</td>
        </tr>
        <tr>
            <td colspan="4"> </td>
        </tr>
        <tr>
            <td colspan="4">[风险提示:]若终端设备需要使用Dolby Digital,Dolby Digital Plus,Dolby MS11,Dolby MS12,Dolby Atmos,Dolby Vision,aaa Sound,aaa TruSurround,aaa-HD,dbx－tv,AAC,DRA,H.264,H.265,MPEG,HDMI,RMVB等任何需要缴费、认证、授权的技术，客户需从权利人处获得相应授权并承担对应的授权费用，供方提供的报价均不包含上述费用。</td>
        </tr>
        <tr>
            <td colspan="4">Special Instructions（特殊说明）</td>
        </tr>
        <tr>
            <td colspan="4">Supply of this Implementation of Dolby technology does not convey a license nor imply a right under any patent，or any other industrial or intellectual property right of Dolby Laboratories, to use this Implementation in any finished end-user or ready-to-use final product. It is hereby notified that a license for such use is required from Dolby Laboratories.</td>
        </tr>
        <tr>
            <td colspan="4"> </td>
        </tr>
        <tr>
            <td colspan="4">特别说明：</td>
        </tr>
        <tr>
            <td colspan="4">"基于本确认书中所展现的板卡型号及对应的主芯片，客户仅有一种类型的专利技术需求，如后续客户的订单硬件需求不变，均默认采用本确认书中的专利技术，如有变动，客户需主动告知xxx。"专利技术"选项的内容仅体现了客户对于杜比、aaa、xxx、dbx-tv、MSS技术的需求，其他类型的专利技术需求以实际软件支持的功能为准。无论是否体现在本确认书中，客户了解任何涉及需要缴费、认证、授权的技术，客户需从权利人处获得相应授权并承担对应的授权费用，供方提供的报价均不包含上述费用。"</td>
        </tr>
        <tr>
            <td colspan="4"> </td>
        </tr>
        <tr>
            <td colspan="4">特别说明：</td>
        </tr>
        <tr>
            <td colspan="4">"专利技术"选项的内容仅体现了客户对于杜比、aaa、xxx、dbx-tv、MSS技术的需求，其他类型的专利技术需求以实际软件支持的功能为准。无论是否体现在本确认书中，客户了解任何涉及需要缴费、认证、授权的技术，客户需从权利人处获得相应授权并承担对应的授权费用，供方提供的报价均不包含上述费用。</td>
        </tr>
        <tr>
            <td colspan="4"> </td>
        </tr>
        <tr>
            <td>确认人：</td>
            <td colspan="4">XXXX</td>
        </tr>
        <tr>
            <td>客户名称：</td>
            <td colspan="4">XXXXX</td>
        </tr>
        <tr>
            <td>确认日期：</td>
            <td colspan="4">XXXXX</td>
        </tr>
    </tbody>
</table>
<script>// 点击打印 marked by yangshuiping <2019-09-25 16:01:40>
$('#click_print').click(function() {
    window.print();
});

// 打印事件监听 marked by yangshuiping <2019-09-25 15:31:12>
window.addEventListener('beforeprint', () => {
    $('.change_colspan').attr('colspan', 3);
});

window.addEventListener('afterprint', () => {
    $('.change_colspan').removeAttr('colspan');
});</script>      

不打印的时候:

点击打印的时候: