仅打印网页的一部分

时间:2013-08-25 14:53:09

标签: javascript html css

我编写的代码只打印网页的一部分。为此,我使用了<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();
}

但问题是,当我点击打印时,pop-us的新窗口会显示完整的详细信息,而不仅仅是<div id="printme">--</div>的{​​{1}} !!请帮帮我

2 个答案:

答案 0 :(得分:3)

不要使其变得复杂,而是使用值visibility / hidden

来使用元素的visible CSS属性

答案 1 :(得分:0)

这是我们打印网页特定部分的方式。

它还包括如何在打印输出页面中实现css和javascript。

对于多个页面,您可以应用&#34;&lt; br&gt;&#34;我在下面实施的标签。

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