how to print a specific area of a web page in c sharp
hey guys, m building a web-page in that theres a
tag which holds some documentary data, so i want t开发者_Python百科o print that specific data and not the whole page i.e banner, textfeilds etc... since i know window.print() function prints the whole page, but how to print a sepicific area in a page.
You can use a print style sheet, which sets the display property on everything except what you want printed to none.
You can load different stylesheets for different media using the media attribute.
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>
You can't print a specific area of a page, but you can hide the rest of the page when printing. Create a CSS that hides the element that you don't want to print:
@media print {
.someelement, .otherelement, .morelement { display: none; }
}
This is how we can print specific part(s) of webpage.
It also includes how to implement css and javascript in the printout page.
Also for multiple part of pages, you can apply "< br >" tag as I implemented below.
<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;
}
加载中,请稍侯......
精彩评论