Question

嘿伙计们，我建立了一个网页，其中包含一些

标签，其中包含一些文件数据，所以我想要打印特定数据，而不是整个页面，即横幅，textfeilds等。因为我知道window.print（）函数会打印整个页面，但是如何在页面中打印出一个特殊的区域。

Answer 1

您可以使用打印样式表，除了要打印到display之外的所有内容外，它还会设置none属性。

您可以使用media属性为不同的媒体加载不同的样式表。

的style.css：

#header 
{
    background-color: #ccc;
    font-size: 2em;
    height: 4em;
    clear: both;
}

print.css：

#header
{
    display: none;
}

yourpage.aspx：

<head>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />  
    <link rel="stylesheet" href="print.css" type="text/css" media="print" />
</head>
<body>
    <div id="header">My Site!</div>
    <div id="content">
      Only print me
    </div>
</body>

Answer 2

您无法打印页面的特定区域，但可以在打印时隐藏页面的其余部分。创建一个隐藏您不想打印的元素的CSS：

@media print {
  .someelement, .otherelement, .morelement { display: none; }
}

Answer 3

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

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

对于多部分网页，您可以应用“＆lt; br＆gt;”我在下面实施的标签。

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

}

如何以c sharp打印网页的特定区域

3 个答案: