用js打印html頁面

做項目時,有在網(wǎng)頁實現(xiàn)全局和局部打印的需求,百度許久,現(xiàn)總結(jié)如下:

打印方式一:

1.首先在head里面加入下面一段js代碼:

function preview(fang)
{
if (fang < 10){
bdhtml=window.document.body.innerHTML;//獲取當前頁的html代碼
sprnstr="<!--startprint"+fang+"-->";//設置打印開始區(qū)域
eprnstr="<!--endprint"+fang+"-->";//設置打印結(jié)束區(qū)域
prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //從開始代碼向后取html
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//從結(jié)束代碼向前取html
window.document.body.innerHTML=prnhtml;
window.print();
window.document.body.innerHTML=bdhtml;
} else {
window.print();
}
}

2.然后在所需要打印的代碼,用和包圍著,如下:

<!--startprint1-->
 
<!--打印內(nèi)容開始-->
<!-- <div id=wdf>
        ...
    </div>
    打印內(nèi)容結(jié)束-->
     
    <!--endprint1-->

3.最后加上一個打印的按鈕

<input type='button' name='button_export' title='打印1' οnclick=preview(1) value='打印1'>

打印方式二:

1.javascript中方法為:

function dayin(){
    var userAgent = navigator.userAgent.toLowerCase(); //取得瀏覽器的userAgent字符串
    if (userAgent.indexOf("trident") > -1){
        alert("請使用google或者360瀏覽器打印");
        return false;
    }else if(userAgent.indexOf('msie')>-1){ 
        var onlyChoseAlert = simpleAlert({
           "content":"請使用Google或者360瀏覽器打印",
           "buttons":{
               "確定":function () {
                   onlyChoseAlert.close();
               }
           }
       })
        alert("請使用google或者360瀏覽器打印");
        return false;
    }else{//其它瀏覽器使用lodop
        var oldstr = document.body.innerHTML; 
        var headstr = "<html><head><title></title></head><body>";  
        var footstr = "</body>";  
        //執(zhí)行隱藏打印區(qū)域不需要打印的內(nèi)容
        document.getElementById("otherpho").style.display="none";
        //此處id換為你自己的id
        var printData = document.getElementById("printdivaa").innerHTML; //獲得 div 里的所有 html 數(shù)據(jù)
        document.body.innerHTML = headstr+printData+footstr;
        window.print();
        //打印結(jié)束后,放開隱藏內(nèi)容
        document.getElementById("otherpho").style.display="block";
        document.body.innerHTML = oldstr ;
    }
}

2.頁面內(nèi)容如下:

    <div id='printdivaa'>
        ...
    </div>
    <div id="otherpho"></div>

3.頁面中放置一個打印按鈕:

<button type="button" class="btn_search" onclick="dayin()">打印</button>

打印方式三(此方式會重新打開一個瀏覽器窗口):

1.javascript中方法為:

function dayin() {
        var userAgent = navigator.userAgent.toLowerCase(); //取得瀏覽器的userAgent字符串
        if (userAgent.indexOf("trident") > -1) {
            alert("請使用google或者360瀏覽器打印");
            return false;
        } else if (userAgent.indexOf('msie') > -1) {
            var onlyChoseAlert = simpleAlert({
                "content" : "請使用Google或者360瀏覽器打印",
                "buttons" : {
                    "確定" : function() {
                        onlyChoseAlert.close();
                    }
                }
            })
            alert("請使用google或者360瀏覽器打印");
            return false;
        } else {//其它瀏覽器使用lodop
            var oldstr = document.body.innerHTML;
            var headstr = "<html><head><title></title></head><body>";
            var footstr = "</body></html>";
            //執(zhí)行隱藏打印區(qū)域不需要打印的內(nèi)容
            document.getElementById("otherpho").style.display="none";
            var printData = document.getElementById("studentPhoTable").innerHTML; //獲得 div 里的所有 html 數(shù)據(jù)
            var wind = window.open("", "newwin",
                    "toolbar=no,scrollbars=yes,menubar=no");
            wind.document.body.innerHTML = headstr + printData + footstr;
            wind.print();
            //打印結(jié)束后,放開隱藏內(nèi)容
            document.getElementById("otherpho").style.display="block";
            wind.close();
            window.document.body.innerHTML = oldstr;
        }
    }

2.頁面內(nèi)容如下:

    <div id='studentPhoTable'>
        ...
        </div>

3.頁面中放置一個打印按鈕:

<input type="button" οnclick="print()"  value="確定打印" />
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

  • ??JavaScript 與 HTML 之間的交互是通過事件實現(xiàn)的。 ??事件,就是文檔或瀏覽器窗口中發(fā)生的一些特...
    霜天曉閱讀 3,715評論 1 11
  • HTML 5 HTML5概述 因特網(wǎng)上的信息是以網(wǎng)頁的形式展示給用戶的,因此網(wǎng)頁是網(wǎng)絡信息傳遞的載體。網(wǎng)頁文件是用...
    阿啊阿吖丁閱讀 4,983評論 0 0
  • ¥開啟¥ 【iAPP實現(xiàn)進入界面執(zhí)行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開一個線程,因...
    小菜c閱讀 7,390評論 0 17
  • 一、JS前言 (1)認識JS 也許你已經(jīng)了解HTML標記(也稱為結(jié)構(gòu)),知道了CSS樣式(也稱為表示),會使用HT...
    凜0_0閱讀 2,945評論 0 8
  • ??自從 2000 年以來,Web 開發(fā)方面的種種規(guī)范、條例正在高速發(fā)展。Web 開發(fā)過去曾是荒蕪地帶,里面東西還...
    霜天曉閱讀 616評論 0 1

友情鏈接更多精彩內(nèi)容