JavaScript实现网页打印控制与事件处理-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_38839887/article/details/129791286

window.print()执行打印功能

//打印后执行的操作window.onafterprint

//打印前执行的操作window.onbeforeprint

<body>
    <!--startprint-->
    <div class="x-body">
        <div class="noprint">
            <div onclick="window.history.go(-1);" style="" type="button" class="layui-btn layui-btn-normal">返回上一页</div>
            <div onclick="doPrint()" type="button" class="layui-btn">打印</div>
        </div>
        
        
        <div class="" style="margin-top:20px;">
            <div class="" style="text-align:center;">
                <span style="font-size:22px;">产品销售合同</span>
                <span style="font-size:16px;">（代发货订单）</span>
            </div>
            <div class="" style="">
            
            </div>
        </div>
    </div>
    <!--endprint-->
<script>

function doPrint() {
  $(".noprint").css("display",'none');
  bdhtml=window.document.body.innerHTML;
  sprnstr="<!--startprint-->";
  eprnstr="<!--endprint-->";
  prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);
  prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));
  window.document.body.innerHTML=prnhtml;
  window.print();

}
//打印后
window.onafterprint = function(){
    console.log("Printing completed...");
    $(".noprint").css("display",'block');
    window.location.reload();
}
//打印前执行某些操作
window.onbeforeprint = function(){
   console.log("Printing onbeforeprint...");
   //record();
}
</script>