只打印網頁的一部分

我寫了一個只打印網頁部分的代碼。爲此，我使用了<div>。只打印網頁的一部分

的代碼如下：

<div id="printme"> 
    <table width='1000' align="center"> 
    <tr><td> 
    <h1> CANDIDATE DETAILS</h1> 
      ----- 
      ----- 
      ----- 
      ----- 
</div> 
<div id="dnt_print"> 
    <fieldset> 
    <legend> <b>Uploads: </b></legend> 
    <table width='900' align="center" > 
       ---- 
       ---- 
       ---- 
    <td align="center"> 
     <input type="button" value="PRINT DETAILS" onclick="printdetails()"> 
    </td> 
</div>

和我的JS打印如下：

function printdetails() 
{ 
    alert("Allow Pop-ups"); 
    var myWindow=window.open('','','width=200,height=100'); 
    var x=document.getElementById("printme").innerHTML; 
    myWindow.document.write(x); 
    myWindow.print(); 
    myWindow.close(); 
}

但問題是，當我點擊打印，新的窗口彈出我們顯示完整的細節，而不僅僅是<div id="printme">--</div>的innerHTML！請幫我

來源

2013-08-25 user2644795

是否有在控制檯上的任何JavaScript錯誤？ – imulsion

不！我可以輸出！但是有了完整的頁面@imulsion – user2644795

您應該爲此使用CSS媒體規則。 – BalusC

反而使其複雜的，與元素的visibility CSS屬性發揮利用價值hidden/visible

來源

2013-08-25 14:59:35

我會使用'display：none'，但是我第二次。 – Dave

（爲了說明OP是否不知道：你可以設置媒體特定的CSS，所以你可以把它放在'media = print'腳本中） – Dave

我在這個上扔-1，這是因爲親自我不喜歡不回答問題的答案，而只是提供替代解決方案。這些答案應該是評論。 –

這是我們如何能夠打印網頁的特定部分（S）。

它還包括如何在打印輸出頁面中實現css和javascript。

對於多頁的頁面，您可以應用「< br>」標籤，如下所示。

<script type="text/javascript"> 
function printCommission() { 
    // For logo html (part 1 for print out) 
    var prtContent = document.getElementById("logo"); 

    // This is the div I was required to include in print out (part 2 for print out)  
    var prtContent1 = document.getElementById("dashboardbody1"); 

    var WinPrint = window.open('', '', 'letf=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0'); 

    // To apply css 
    WinPrint.document.write("<style> .commission td, .commission th {border-color: #CCCCCC;padding: 4px;} .commission th {background-color: #106C9B;border-color: #CCCCCC;color: #FFFFFF;} .commission { border-collapse: collapse; color: #000000; text-align: center; } .commission td.td-noborder { border: 1px solid #FFFFFF;} .bg-grey { background: none repeat scroll 0 0 #CCCCCC;} .bold { font-weight: bold !important;}</style>"); 

    WinPrint.document.write(prtContent.innerHTML + "<br><br>" + prtContent1.innerHTML); 

    // to apply javascript (I used it to hide buttons) 
    WinPrint.document.write("<script type='text/javascript'>" + " window.onload=function(){ document.getElementById('downloadReport').style.display='none'; document.getElementById('printout').style.display='none'; document.getElementById('imgCommission').style.display='none';}; <" + "/" + "script>"); 

    WinPrint.document.close(); 
    WinPrint.focus(); 
    WinPrint.print(); 
    WinPrint.close(); 
    return false; 
}

來源

2014-03-10 08:45:10 Gaurav123

只打印網頁的一部分

回答

相關問題