如何让页面初始化的时候实现点击事件_浏览器如何打印表单

【摘要】目前大部分项目采用的是BS架构，打印功能在B/S环境下，并不友好， 不过我们之前有智慧农业的项目，有相关的案例可以依托， 本文就是在Chrome环境下，明月同学进行的技术分享。

【作者】 明月

本文分为三大部分：

第一部分：案例背景

第二部分：实现方式

第三部分：实现过程中遇到的问题

具体内容如下：

第一部分：案例背景：

后台管理系统展示的表格页面可以通过Ctrl + P进行打印操作，但是效果可能不是很好（如图1所示），可以新增打印页面来调整打印的格式和相关字段（如图2所示）；

图1：原网页打印预览格式

图2：调整后的打印预览格式

第二部分：实现方式

（1）初始化页面：页面渲染，通过接口将订单相关数据渲染到页面上；

（2）绑定打印事件（通过window.print()方法实现），print() 方法用于打印当前窗口的内容，如果要实现局部打印，可以在打印时替换body中的内容，打印完成后再替换回来（在html中，通过star和end来标记打印区域），实现代码如下：

HTML代码：

<div>这块内容不需要打印</div>
<!--startprint-->
<div class="content">
  这里是需要打印的内容
    .....
</div>
<!--endprint-->
<div>这块内容不需要打印</div>

JS点击事件核心代码如下：

function printReceipt(){
    bdhtml = window.document.body.innerHTML;//获取当前页的html代码
    sprnstr = "<!--startprint-->"; //设置打印开始区域    
    eprnstr = "<!--endprint-->"; //设置打印结束区域
    //以下两行代码目标是获取从开始区域到结束区域之间的代码：
    prnhtml = bdhtml.substring(bdhtml.indexOf(sprnstr) + 17);  
    prnhtml = prnhtml.substring(0,prnhtml.indexOf(eprnstr));
    window.document.body.innerHTML = prnhtml;//当前窗口内容渲染为需要打印部分代码
    window.print();//打印当前窗口页面内容
    location.reload(); //重新刷新当前窗口, 点击事件在渲染页面之外，不刷新页面第二次打印事件会失效
    window.document.body.innerHTML = bdhtml;//还原页面
}

第三部分：实现过程中遇到的问题：

（1）问题：打印事件在第一次实现之后，之后点击没有生效：打印之后替换页面内容会导致原来页面状态失效；

解决方式（以下两种都可以）：

① 在打印之后刷新页面location.reload()（代码中实现的方式）；

② 打印按钮设置在打印区域范围内：为打印按钮添加一个样式：

@media print{
    .notprint { display:none }
}

（2）持续补充中......

【延伸阅读】

田甜：云打印-飞鹅的总结

欢迎关注 技术团队的知乎账号 我们凭团队实例运作以下专栏， 必须干货！

互联网创业专栏 (我们小伙伴的创业历程)

与您一起聊技术 (APP、微信公众号、小程序、H5 技术总结)

互联网产品研发管理 (我们公司对产品结构的管理思路)

产品君的案例库（产品小伙伴深刻总结）