Member Avatar for danishbacker 
if (window.print) { 
document.write('<form>Click Here To ' + '<input type=button name=print value="Print" ' + 'onClick="javascript:window.print()"> This Page!</form>'); 
}

using this code the whole page is printed can I limit the paper size?

also can I remove the print header and footer?

Thanks in advance.

  • 3 Contributors
  • 5 Replies
  • 4K Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by essential
Member Avatar for scru

I don't know about limiting the paper size.

However, removing the header and footer from the printed document can be done with some CSS:

Add this to your <head>:

<style media="print" type="text/css">
.no-print{display:None}
</style>

Then add class="no-print" to your header/footer containers.

Since the no-print style is targeted at printed documents (media="print"), It won't affect anything else.

Member Avatar for essential

Yes it can be done with the help of css. I wil play a simple demo to clear things up!
Asuming that you have
2 media print1.css and print2.css, With print1.css you have the following attribution

html { width: 1024px; height: 100%; }
body {
font: 700 16px Arial, sans-serif;
margin: 0; 
/* And so on... */
}

and for print2.css set the desired value for the width, height, font etc.

html { width: 800px; height: 80%; }
body { font: 500 12px Arial, sans-serif;
}

and this goes for overall output

<html>
<head>
<title><!--sample--></title>
<link rel="stylesheet" type="text/javascript" href="style.css" media="screen" />
<link rel="stylesheet" type="text/javascript" href="printerDefault.css" media="print" />

<script type="text/javascript">
<!--

function printMe(thisStyle) {
printLayout = document.getElementsByTagName('link')[1]; 
printLayout.href = thisStyle; window.print();  
}

//--> 
</script>
</head>
<body>
<h3>Print this page</h3>
<form name="frm1" action="#" onsubmit="return false;">
<label>Print Layouts</label><br /><br /><br />
<input type="button" value="Layout 1" onclick="printMe('print1.css');" /> <input type="button" value="Layout 2" onclick="printMe('print2.css');" /> </form> 
</body>
</html>

finally its all done... Enjoy!

Member Avatar for danishbacker

Thanks a lot, This is working
but i mean removing the print header and footer ( like page title etc. )

also i tried as 'essential' said but, that also is printing the whole page and also got the print header and footer.
is it because i'm not having printerDefault.css and style.css

Member Avatar for essential

So you intended to print particular section of your page? Is this what you need?

Member Avatar for essential

Base on scru's effective solution, your page should go like this. -->

<html>
<head> 
<title>PrintMe</title>

<style type="text/css">
@media screen {

body {
     background-color: #778899;
     color: #373832;
     font: 700 16px Arial, Sans-Serif;
} }

@media print {
.no-print { display: none; }
body { 
     background: #fff;  
     color: #000000;
     font: 500 13px 'Lucida Console', 'courier new', monospace; 
} }
</style>

<script type="text/javascript">
<!--
var no_print = ['This is a demo!', 'This will not be displayed if the user attempt to print this page.', 'Javascript is fun!'];

function filler(txt)
{ for ( var x = 0; x < txt; x++) { 
document.write(no_print[Math.floor(Math.random()*3)] + ' ');
} }

function printMe() { document.title = ''; window.print(); }
//-->
</script>
</head>
<body>
<p class="no-print"> 
<script type="text/javascript">
<!--
filler(20);
//-->
</script>
</p>
<p> This the only part the page will get printed.. </p>
<!-- This demo is highly readable! The rest is up to you on how you will extend this function, all things can be done from here... Good Luck! -->
<p><a href="javascript:printMe();">Print Me</a></p>
</body>
</html>

Hope everything now is clear... Good day to you!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.