欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2022年06月30日 09:20:10   作者：硅谷工具人  
本文主要介紹了window.print()局部打印三種方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

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

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

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

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

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

function doPrint2(){
    if(getExplorer() == "IE"){
        pagesetup_null();
    }
    //根據(jù)div標(biāo)簽ID拿到div中的局部?jī)?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;//重新給頁(yè)面內(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";
??? }
}

方法三：通過(guò)動(dòng)態(tài)創(chuàng)建iframe來(lái)打?。ㄍ扑]的方法）（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)頁(yè)眉頁(yè)腳和路徑的問(wèn)題
            doc.write('<div>' + el.innerHTML + '</div>');
            doc.close();
            iframe.contentWindow.focus();            
    }
    setTimeout(function(){ iframe.contentWindow.print();},50)  //解決第一次樣式不生效的問(wèn)題
    if (navigator.userAgent.indexOf("MSIE") > 0){
        document.body.removeChild(iframe);
    }   
}
</script>
 </body>
</html>

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

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

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

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

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

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

190622更新說(shuō)明：

看到兩個(gè)伙伴留言，我說(shuō)說(shuō)后面發(fā)生的事兒吧，我當(dāng)時(shí)做的是電子面單的打印，但是發(fā)現(xiàn)第三種方法打印出的電子面單的條碼還是不太清洗，字體偏淡。

所以最后也沒(méi)有用第三種方法，直接使用lodop來(lái)打印了。

但是本身第三種方法測(cè)試是可行的。

20210616更新說(shuō)明：

結(jié)合評(píng)論中的反饋，針對(duì)第三種方式解決了頁(yè)眉頁(yè)腳顯示的問(wèn)題、第一次出現(xiàn)樣式不生效的問(wèn)題。

到此這篇關(guān)于window.print()局部打印三種方式(小結(jié))的文章就介紹到這了,更多相關(guān)window.print()局部打印內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論