Haktech Blogs
EST. 2008 | Tech News and Tutorials
Monday, July 8, 2024
Sunday, July 7, 2024
Friday, April 26, 2024
Monday, March 25, 2024
Saturday, February 3, 2024
Monday, January 29, 2024
Sunday, December 24, 2023
Use CSS to print just the desired portion of a webpage or web document.
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
Subscribe to:
Posts (Atom)