window.print()局部打印三種方式

首先准備要打印的內容，也可以打印時再填充，html中定義如下：

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

 

方法一： 通過開始、結束標記（startprint、endprint）來打印

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;
}

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

function doPrint2(){
    if(getExplorer() == "IE"){
        pagesetup_null();
    }
    //根據div標簽ID拿到div中的局部內容
    bdhtml=window.document.body.innerHTML; 
    var jubuData = document.getElementById("printcontent").innerHTML;
    //把獲取的 局部div內容賦給body標簽, 相當於重置了 body里的內容
    window.document.body.innerHTML= jubuData; 
    //調用打印功能
    window.print();
    window.document.body.innerHTML=bdhtml;//重新給頁面內容賦值；
    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";
    }
}

 

方法三：通過動態創建iframe來打印（推薦的方法）

這里要注意判斷iframe是否存在，防止反復使用時，iframe重復創建消耗內存

function doPrint3(){
    
    //判斷iframe是否存在，不存在則創建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("<LINK rel="stylesheet" type="text/css" href="css/print.css">");
            doc.write('<div>' + el.innerHTML + '</div>');
            doc.close();
            iframe.contentWindow.focus();            
    }
    iframe.contentWindow.print();
    if (navigator.userAgent.indexOf("MSIE") > 0){
        document.body.removeChild(iframe);
    }
    
}

 

使用方法一、二時，弊端有2個：

1）由於替換來當前頁面的內容，從而當取消打印時，會使原來的頁面一些form表單失效。

2）當前頁面中的樣式會影響到打印的內容中的樣式。

所以這里推薦使用iframe來創建，並且可以自定義樣式。

以上內容在谷歌瀏覽器下測試通過，其他瀏覽器未做驗證。

-------------------------------------------------------------------------------

190622更新說明：

看到兩個伙伴留言，我說說后面發生的事兒吧，我當時做的是電子面單的打印，但是發現第三種方法打印出的電子面單的條碼還是不太清洗，字體偏淡。

所以最后也沒有用第三種方法，直接使用lodop來打印了。

但是本身第三種方法測試是可行的。