快捷導(dǎo)航

window.print()打印html網(wǎng)頁(yè)的兩種方法實(shí)現(xiàn)

更新時(shí)間：2022年06月30日 09:20:37 作者：不會(huì)有人真的學(xué)前端吧

本文主要介紹了window.print()打印html網(wǎng)頁(yè)的兩種方法實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

一、編輯打印區(qū)域

思路：

通過(guò)編輯打印的開(kāi)始、結(jié)束標(biāo)記來(lái)區(qū)分打印的區(qū)域

HTML：

<!--startprint-->
<div>打印的區(qū)域</div>
<!--endprint-->

js：

function doPrint() { 
    bdhtml=window.document.body.innerHTML; 
    sprnstr="<!--startprint-->"; //開(kāi)始打印標(biāo)識(shí)字符串有17個(gè)字符
    eprnstr="<!--endprint-->"; //結(jié)束打印標(biāo)識(shí)字符串
    prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); //從開(kāi)始打印標(biāo)識(shí)之后的內(nèi)容
    prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); //截取開(kāi)始標(biāo)識(shí)和結(jié)束標(biāo)識(shí)之間的內(nèi)容
    window.document.body.innerHTML=prnhtml; //把需要打印的指定內(nèi)容賦給body.innerHTML
    window.print(); //調(diào)用瀏覽器的打印功能打印指定區(qū)域
    window.document.body.innerHTML=bdhtml;//重新給頁(yè)面內(nèi)容賦值；
    return false;
}

傳送門：window.print()局部打印三種方式

二：將不需要打印的部分隱藏

思路：

在打印之前利用jQuery的$(selector).hide(speed,callback)語(yǔ)法將不需要的元素先隱藏，打印之后再將隱藏的元素顯示出來(lái)$(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 () {
            //將需要打印的元素上加一個(gè) hide_when_print類（可以隨便定義），這個(gè)類是專門控制顯示隱藏的   
            $(".hide_when_print").hide()
            console.log('打印前');
            //設(shè)置打印時(shí)的頁(yè)面的樣式
            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();
            //設(shè)置打印后的樣式
            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>

到此這篇關(guān)于window.print()打印html網(wǎng)頁(yè)的兩種方法實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)window.print()打印html網(wǎng)頁(yè)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: