As a website developer, many times we come across a situation in which we have to add "Print" button/link on a webpage. This post is for all those web developers.
Here, we will see how to add a "Print" button on a webpage. We will also see, how to avoid certain content from a print.
Go through the following sections:
Section 1: How to add "Print" button on a webpage.
Program Code:
<html>
<head>
</head>
<body>
<font size=7><b>
This is Sample Webpage
</b></font>
<br />
<br />
<br />
<a href="#" onclick="javascript:window.print();">Print this page</a>
</body>
</html>
Output:
On Browser:
On a print page:
Section 3: Removing "Print" button from a print.
Program:
<html>
<head>
<style type="text/css">
@media print
{
div.willnotbeshowninprint
{
display: none;
}
}
</style>
</head>
<body>
<font size=6><b>
This is Sample Webpage
</b></font>
<br />
<br />
<br />
<div class="willnotbeshowninprint">
<font size=6><b>
This will not be shown in Print Page
</b></font>
</div>
<br />
<br />
<br />
<div class="willnotbeshowninprint">
<a href="#" onclick="javascript:window.print();">Print this page</a>
</div>
</body>
</html>
Output:
On a Print Page:
Here, we will see how to add a "Print" button on a webpage. We will also see, how to avoid certain content from a print.
Go through the following sections:
Section 1: How to add "Print" button on a webpage.
Program Code:
<html>
<head>
</head>
<body>
<font size=7><b>
This is Sample Webpage
</b></font>
<br />
<br />
<br />
<a href="#" onclick="javascript:window.print();">Print this page</a>
</body>
</html>
Output:
Section 2: How to avoid certain content from a print.
Program Code:
Section 2: How to avoid certain content from a print.
Program Code:
<html>
<head>
<style type="text/css">
@media print
{
div.willnotbeshowninprint
{
display: none;
}
}
</style>
</head>
<body>
<font size=6><b>
This is Sample Webpage
</b></font>
<br />
<br />
<br />
<div class="willnotbeshowninprint">
<font size=6><b>
This will not be shown in Print Page
</b></font>
</div>
<br />
<br />
<br />
<a href="#" onclick="javascript:window.print();">Print this page</a>
</body>
</html>
<head>
<style type="text/css">
@media print
{
div.willnotbeshowninprint
{
display: none;
}
}
</style>
</head>
<body>
<font size=6><b>
This is Sample Webpage
</b></font>
<br />
<br />
<br />
<div class="willnotbeshowninprint">
<font size=6><b>
This will not be shown in Print Page
</b></font>
</div>
<br />
<br />
<br />
<a href="#" onclick="javascript:window.print();">Print this page</a>
</body>
</html>
Output:
On Browser:
On a print page:
Section 3: Removing "Print" button from a print.
Program:
<html>
<head>
<style type="text/css">
@media print
{
div.willnotbeshowninprint
{
display: none;
}
}
</style>
</head>
<body>
<font size=6><b>
This is Sample Webpage
</b></font>
<br />
<br />
<br />
<div class="willnotbeshowninprint">
<font size=6><b>
This will not be shown in Print Page
</b></font>
</div>
<br />
<br />
<br />
<div class="willnotbeshowninprint">
<a href="#" onclick="javascript:window.print();">Print this page</a>
</div>
</body>
</html>
Output:
On a Print Page:
Mr. Parag,
ReplyDeleteYou have explained this post very simply. I tried that and it worked fine for me.
Thanks
Very informative article, Which you have shared here about web designing. After reading your article I got very much information about the process of adding a print button on the webpage and it resolved many of my doubts. I would like to thanks for sharing this article here. web design Maine
ReplyDeleteYou have shared a nice article here about web design. Your article is very informative and useful to know more about the process of adding a print button to a webpage. If anyone looking for the Ireland Website Designing services, webie is the best for you.
ReplyDelete