[SOLVED] Javascript Printer-Friendly Page "Creator"

Stuart · #1 Oct 8th, 2007, 21:06

Hello again,

I am trying to work out a small problem I am having. What I am trying to do is to create a link that says 'Print this page', or something like that. When clicked, it will bring the user to print.htm, where a javascript code will output everything that is inside a certain tag, such as

HTML: Select all

<div id="content"></div>

And the link would be

HTML: Select all

<a href="print.htm" target="_blank">Print this page</a>

I have the code:

Code: Select all

 <script language="javascript">
     document.write(window.opener.document.getElementById("content").innerHTML);
     window.print();
</script>

Now the only thing is to not take the inner.HTML of an element with an id, but instead to take everything out of the body. I was thinking this:

Code: Select all

<script language="javascript">
document.write(window.opener.document.getElementsByTagName("body").innerHTML);
</script>

I used document.getElementsByTagName("body") instead of document.getElementById("content"), but it does not seem to work. Print.htm is showing me "undefined". (What is going on here??)

Any help would be appreciated.

Thanks,
SWagner

PS: My server does not allow/support asp, php, cgi, cfm, etc... so using those (although they're much better to use!), is out of the question.

alexgeek · #2 Oct 8th, 2007, 21:23

The following may work:

Code: Select all

<script type="text/javascript">
var x=document.getElementById("content").innerHTML;
myWindow=window.open('','MyName','width=200,height=100')
myWindow.document.write(x)
myWindow.print();

</script>

alexgeek · #3 Oct 8th, 2007, 21:25

Tested in FF with the following code:

HTML: Select all

 <html>
<head>
<script type="text/javascript">
function printIT() {
var x=document.getElementById("content").innerHTML;
myWindow=window.open('','MyName','width=200,height=100')
myWindow.document.write(x)
myWindow.print();
}
</script>
</head>

<body>
<a href="#" onClick="printIT();">click</a>
<div id="content">Hello world</div>
</body>
</html>

Stuart · #4 Oct 8th, 2007, 21:28

Thanks for replying, but I am trying to output the entire body.
SWagner

alexgeek · #5 Oct 8th, 2007, 21:30

Oh sorry! Try making your body tag like this:
<body id="content">

Stuart · #6 Oct 8th, 2007, 21:33

I had that idea too, but I have over 50 web pages that I would have to do this with. A little tedious, don't you think?

Stuart · #7 Oct 8th, 2007, 21:35

Are you sure that

Code: Select all

<script language="javascript">
document.write(window.opener.document.getElementsByTagName("body").innerHTML);
</script>

wouldn't work somehow?

alexgeek · #8 Oct 8th, 2007, 21:36

Quote:

Originally Posted by swagner

I had that idea too, but I have over 50 web pages that I would have to do this with. A little tedious, don't you think?

I think I'm missing something.. as either way you will have to edit those 50 pages if they are static html.

Stuart · #9 Oct 8th, 2007, 21:43

I am still curious. Javascript has always worked for me. I think that I am just using the wrong code.

Code: Select all

document.getElementsByTagName("body").innerHTML

seems ok, but for some reason, it crashes and displays "undefined" on print.htm. Is it possible that the code is supposed to be getElementByTagName instead of Elements? Maybe it is just some little thing like that...

alexgeek · #10 Oct 8th, 2007, 21:55

try the following:

Code: Select all

<html>
<head>
<script type="text/javascript">
function printIT() {
var spanArray = document.getElementsByTagName('body');
myWindow=window.open('','MyName','width=200,height=100')
myWindow.document.write(spanArray[0].innerHTML)

}
</script>
</head>

<body>
<a href="#" onClick="printIT();">click</a>
<div id="content">Hello world</div>
</body>
</html>

Stuart · #11 Oct 8th, 2007, 22:02

Thanks, it's working great!
Regards,
SWagner

alexgeek · #12 Oct 8th, 2007, 22:03

You're welcome, I wasted some ink on this

.
Glad you got it working.

Stuart · #13 Oct 8th, 2007, 22:10

One more thing. I have a

Code: Select all

document.write('<img src="file.jpg" />')

on my page (index.htm). Now it is being produced twice on print.htm since the original code (see above) is written, as well as the image written by the code on my page (index.htm). Any solution?

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
[SOLVED] Javascript Printer-Friendly Page "Creator"

[SOLVED] Javascript Printer-Friendly Page &quot;Creator&quot;

[SOLVED] Javascript Printer-Friendly Page "Creator"