js实现html打印功能

JS实现html打印功能

1.javascript

   <!-- 打印功能 -->
    <script language="javascript">
        function preview(oper) {
            if (oper < 10) {
                //绑定数据
                bindData()
                bdhtml = window.document.body.innerHTML;//获取当前页的html代码
                sprnstr = "<!--startprint" + oper + "-->";//设置打印开始区域
                eprnstr = "<!--endprint" + oper + "-->";//设置打印结束区域
                prnhtml = bdhtml.substring(bdhtml.indexOf(sprnstr) + 18); //从开始代码向后取html
                prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));//从结束代码向前取html
                window.document.body.innerHTML = prnhtml;
                window.print();
                window.document.body.innerHTML = bdhtml;
            } else {
                window.print();
            }
            //将表单中手动填写的数据进行绑定,便于html()的时候获取到
            function bindData() {
                var $ = layui.$;
                //搞定 type=text, 同时如果checkbox,radio,select>option的值有变化, 也绑定一下, 这里忽略button
                $("input,select option").each(function () {
                    $(this).attr('value', $(this).val());
                });
            }

        }
    </script>

2.HTML

<!--startprint1-->

<!--打印内容开始-->
<div id=wdf>
    ...
</div>
<!--打印内容结束-->

<!--endprint1-->

3.打印按钮

 <i class="layui-icon layui-icon-export" type="button" name='button_export' title='打印1' onclick=preview(1)
                value=打印1 style="float: right;font-size: 18px;"> </i>

版权声明:本文为weixin_44248053原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。