I'm offering this tutorial on how to set the printable area of a webpage or web document so that it may be printed on any printer as part of my online check/cheque printer project.
First is to add this to your .CSS file
<style>
@media screen {
.HideFromPrint{ display: block; }
.ShowFromPrint{ display: block !important; }
}
@media print {
.HideFromPrint{ display: none; }
.ShowFromPrint{ display: block !important; }
}
</style>
Then you can call the .HideFromPrint on you html codes
<div class= "ShowFromPrint">
<table border="1">
<tr>
<th>Name</th>
<th class="HideFromPrint">Remarks</th>
<tr>
<td>This area is Printable</td>
<td class="HideFromPrint">Not Printable</td>
</tr>
<tr>
<td>This area is Printable</td>
<td class="HideFromPrint">Not Printable</td>
</tr>
</table>
</div>
<input class="HideFromPrint" TYPE="button" Value="Print Me" onClick="window.print()">
Full example here:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Printable and Not Printable CSS example</title>
</head>
<style>
@media screen {
.HideFromPrint{ display: block; }
.ShowFromPrint{ display: block !important; }
}
@media print {
.HideFromPrint{ display: none; }
.ShowFromPrint{ display: block !important; }
}
</style>
</head>
<body>
<div class= "ShowFromPrint">
<table border="1">
<tr>
<th>Name</th>
<th class="HideFromPrint">Remarks</th>
<tr>
<td>This area is Printable</td>
<td class="HideFromPrint">Not Printable</td>
</tr>
<tr>
<td>This area is Printable</td>
<td class="HideFromPrint">Not Printable</td>
</tr>
</table>
</div>
<input class="HideFromPrint" TYPE="button" Value="Print Me" onClick="window.print()">
</body>
</html>
you can check my post on code project website: project: https://www.codeproject.com/script/Articles/ArticleVersion.aspx?waid=4282204&aid=5374692
No comments:
Post a Comment
Since we see a lot of users SPAMMING and abusing our comment section. we are now strictly checking new comments before approving it on haktech. of you like to promote your website. you can always contact me so i can do SEO for your website.