window.print()打印html网页

时间:2022-09-08 不会有人真的学前端吧人气:0

一、编辑打印区域

思路：

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

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>

加载全部内容