window.print()局部打印三種方式(小結(jié))

更新時(shí)間：2022年06月30日 09:20:10 作者：硅谷工具人

本文主要介紹了window.print()局部打印三種方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

方法一：通過開始、結(jié)束標(biāo)記（startprint、endprint）來打印
方法二：通過id選擇器來替換內(nèi)容打印，方法類似第一種
方法三：通過動(dòng)態(tài)創(chuàng)建iframe來打?。ㄍ扑]的方法）（210616更新）
190622更新說明：
20210616更新說明：

首先準(zhǔn)備要打印的內(nèi)容，也可以打印時(shí)再填充，html中定義如下：

<!--startprint-->
<div id="printcontent" style="display:none">
${printContentBody}
</div>
<!--endprint-->

方法一：通過開始、結(jié)束標(biāo)記（startprint、endprint）來打印

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

方法二：通過id選擇器來替換內(nèi)容打印，方法類似第一種

function doPrint2(){
    if(getExplorer() == "IE"){
        pagesetup_null();
    }
    //根據(jù)div標(biāo)簽ID拿到div中的局部內(nèi)容
    bdhtml=window.document.body.innerHTML; 
    var jubuData = document.getElementById("printcontent").innerHTML;
    //把獲取的 局部div內(nèi)容賦給body標(biāo)簽, 相當(dāng)于重置了 body里的內(nèi)容
    window.document.body.innerHTML= jubuData;?
    //調(diào)用打印功能
    window.print();
    window.document.body.innerHTML=bdhtml;//重新給頁面內(nèi)容賦值；
    return false;
}

function pagesetup_null(){?????????????? ?
??? var hkey_root,hkey_path,hkey_key;
??? hkey_root="HKEY_CURRENT_USER";
??? hkey_path="\\Software\\Microsoft\\Internet Explorer\\PageSetup\\";
??? try{
??????? var RegWsh = new ActiveXObject("WScript.Shell");
??????? hkey_key="header";
??????? RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"");
??????? hkey_key="footer";
??????? RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"");
??? }catch(e){}
}

function getExplorer() {
??? var explorer = window.navigator.userAgent ;
??? //ie 
??? if (explorer.indexOf("MSIE") >= 0) {
??????? return "IE";
??? }
??? //firefox 
??? else if (explorer.indexOf("Firefox") >= 0) {
??????? return "Firefox";
??? }
??? //Chrome
??? else if(explorer.indexOf("Chrome") >= 0){
??????? return "Chrome";
??? }
??? //Opera
??? else if(explorer.indexOf("Opera") >= 0){
??????? return "Opera";
??? }
??? //Safari
??? else if(explorer.indexOf("Safari") >= 0){
??????? return "Safari";
??? }
}

方法三：通過動(dòng)態(tài)創(chuàng)建iframe來打?。ㄍ扑]的方法）（210616更新）

這里要注意判斷iframe是否存在，防止反復(fù)使用時(shí)，iframe重復(fù)創(chuàng)建消耗內(nèi)存

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus?">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
 <button onclick="doPrint3()">打印</button>

<!--startprint-->
<div id="printcontent" style="display:none">
這里可以自己填充打印內(nèi)容
</div>
<!--endprint-->

<script type='text/javascript'>
function doPrint3(){
    
    //判斷iframe是否存在，不存在則創(chuàng)建iframe
    var iframe=document.getElementById("print-iframe");
    if(!iframe){  
            var el = document.getElementById("printcontent");
            iframe = document.createElement('IFRAME');
            var doc = null;
            iframe.setAttribute("id", "print-iframe");
            iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
            document.body.appendChild(iframe);
            doc = iframe.contentWindow.document;
            //這里可以自定義樣式
            doc.write('<style media="print">@page {size: auto;margin: 0mm;}</style>'); //解決出現(xiàn)頁眉頁腳和路徑的問題
            doc.write('<div>' + el.innerHTML + '</div>');
            doc.close();
            iframe.contentWindow.focus();            
    }
    setTimeout(function(){ iframe.contentWindow.print();},50)  //解決第一次樣式不生效的問題
    if (navigator.userAgent.indexOf("MSIE") > 0){
        document.body.removeChild(iframe);
    }   
}
</script>
 </body>
</html>

對打印預(yù)覽頁面的居中或者橫向、縱向設(shè)置可以參考這個(gè)鏈接：https://blog.csdn.net/ZHANGLIZENG/article/details/91865007

使用方法一、二時(shí)，弊端有2個(gè)：

1）由于替換來當(dāng)前頁面的內(nèi)容，從而當(dāng)取消打印時(shí)，會使原來的頁面一些form表單失效。

2）當(dāng)前頁面中的樣式會影響到打印的內(nèi)容中的樣式。

所以這里推薦使用iframe來創(chuàng)建，并且可以自定義樣式。

以上內(nèi)容在谷歌瀏覽器下測試通過，其他瀏覽器未做驗(yàn)證。