window.print()打印html网页的两种方法实现

目录

• 一、编辑打印区域
• 二：将不需要打印的部分隐藏

一、编辑打印区域

思路：

通过编辑打印的开始、结束标记来区分打印的区域

HTML：

<!--startprint-->
<div>打印的区域</div>
<!--endprint-->

js：

function doPrint() { 
    bdhtml=window.document.body.innerHTML; 
    sprnstr="<!--startprint-->"; //开始打印标识字符串有17个字符
    eprnstr="<!--endprint-->"; //结束打印标识字符串
    prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); //从开始打印标识之后的内容
    prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); //截取开始标识和结束标识之间的内容
    window.document.body.innerHTML=prnhtml; //把需要打印的指定内容赋给body.innerHTML
    window.print(); //调用浏览器的打印功能打印指定区域
    window.document.body.innerHTML=bdhtml;//重新给页面内容赋值；
    return false;
}

传送门：window.print()局部打印三种方式

二：将不需要打印的部分隐藏

思路：

在打印之前利用jQuery的$(selector).hide(speed,callback)语法将不需要的元素先隐藏，打印之后再将隐藏的元素显示出来$(selector).show(speed,callback)

HTML：

<button class="btn btn-primary" style="width: 85px;height: 40px;margin-left: 25px;" onclick="doPrint_hide()">
    打印
</button>
<div class="tab_out1 hide_when_print">
    11111
</div>
<div class="everyCustomer_list">
    22222
</div>
<div class="form-horizonta hide_when_print">
    3333
</div>

js：

<script>
    
    function doPrint_hide() {
        window.print()
    }
  
    $(function () {
        var beforePrint = function () {
            //将需要打印的元素上加一个 hide_when_print类（可以随便定义），这个类是专门控制显示隐藏的   
            $(".hide_when_print").hide()
            console.log('打印前');
            //设置打印时的页面的样式
            document.getElementsByTagName('body')[0].style.zoom = 1.10;
            var css = {
                'display': 'flex',
                'flex-direction': 'column',
                'justify-content': 'center',
                'flex-wrap': 'wrap',
            };
            var css1 = {
                "margin": '2px auto'
            }
            var css2 = {
                'border': "0"
            }
            $("#tab_out1").css(css)
            $(".everyCustomer_list").css(css1)
            $(".form-horizontal").css(css2)
        };
 
        var afterPrint = function () {
            console.log('打印后');
            document.getElementsByTagName('body')[0].style.zoom = 1.00;
            //显示之前被隐藏的元素
            $(".hide_when_print").show();
            //设置打印后的样式
            var css = {
                'display': 'flex',
                'flex-direction': 'row',
                'justify-content': 'flex-start',
                'flex-wrap': 'wrap',
            };
            var css1 = {
                'margin': '0',
                'margin-left': '12px',
                'margin-top': '20px'
            }
            var css2 = {
                'border': "1px solid #e7e7eb"
            }
            $("#tab_out1").css(css);
            $(".everyCustomer_list").css(css1);
            $(".form-horizontal").css(css2)
 
        };
        if (window.matchMedia) {
            var mediaQueryList = window.matchMedia('print');
            mediaQueryList.addListener(function (mql) {
                if (mql.matches) {
                    beforePrint();
                } else {
                    afterPrint();
                }
            });
        }
 
        window.onbeforeprint = beforePrint;
        window.onafterprint = afterPrint;
    })
</script>

到此这篇关于window.print()打印html网页的两种方法实现的文章就介绍到这了,更多相关window.print()打印html网页内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！