Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

printing select elements of an html document using javascript

Posted on 2006-07-21
8
327 Views
Last Modified: 2013-12-16
I need to print select content from an html page..in this case an image and a table. I am trying to retrieve the contents of the required elements using getElementsByTagName() ..However I am not able to retrieve the content of the nodes , thugh I am able to retrieve the nodeList.

Instead of getElementsByTagName, if I  use getElementById , then the script works fine , however getElementById retrieves only the first element by the id name , whereas in this case I have two elements , hence I am trying to use the getElementsByTagName fucntion.
 Here is the script with the html code using
getElementById
*********************************************************************
<script language="JavaScript">
var gAutoPrint = true; // Tells whether to automatically call the print function

function printSpecial()
{
if (document.getElementById != null)
{
    var html = '<HTML>\n<HEAD>\n';
 
    if (document.getElementsByTagName != null)
    {
      var headTags = document.getElementsByTagName("head");
       if (headTags.length > 0)
      html += headTags[0].innerHTML;
    }

     html += '\n</HEAD>\n<BODY>\n';

    //doesnt work for getElementsbytagname
     var printReadyElem = document.getElementById("printReady");  

    if (printReadyElem != null)
   {
     html += printReadyElem.innerHTML;
   }
   else
  {
    alert("Could not find the printReady function");
    return;
  }

   html += '\n</BODY>\n</HTML>';

  var printWin = window.open("","printSpecial");
  printWin.document.open();
  printWin.document.write(html);
  printWin.document.close();
  if (gAutoPrint)
     printWin.print();
}
else
{
 alert("The print ready feature is only available if you are using an browser.  Please update your      
   browswer.");
}
}
</script>

<body>
<img id="printReady" src="image.gif"  />


<form id="printMe" name="printMe">  <input type="button" name="printMe" onClick="printSpecial()" value="Print this Page"> </form>

</body>
</html>


****************************** ******************************************
if i add an element with tagname say "printready" eg
<printReady> this shuld b printed </printReady>
in the body section , and add
alert ( document.getElementsByTagName("printReady").length); in the script section,
the correct no of the elements is displayed, however if i loop thrugh and try addign the innerHTML content , it thwrs an error..

IS this because HTML dom doesnt recognize any element by the name "printReady"?? What is going wrong?
0
Comment
Question by:angelzworld
  • 3
  • 3
8 Comments
 
LVL 2

Expert Comment

by:zeroreality
ID: 17157293
I must ask why you dont just do one of these in your stylesheet:

@media print {

body * {
    display: none;
}
#id_of_element {
    display: block;  /* or inline */
}
.class_of_element {
    display: block;  /* or inline */
}

}
0
 

Author Comment

by:angelzworld
ID: 17157350
If I do this , it prints the elements  according to the exact location on the webpage, i.e the chart is at the bottom and the table is even belwo that.. As a result when I print it , half of the page is bank and the print goes to the next page. I dont want to do that , hence I figured I could extract the content and generate a new page and then print it.
0
 

Author Comment

by:angelzworld
ID: 17164802
still awaiting answers? what are the different ways that I can print certain parts of a webpage on the click of an html button. I need to print an image and a table which are on the lower half of a web page , however when I actually print them , I  need to shift the position of the elements ( the image and the table) towards the upper half of the document , so that when its printed, the upper half does not remain blank.
0
What is SQL Server and how does it work?

The purpose of this paper is to provide you background on SQL Server. It’s your self-study guide for learning fundamentals. It includes both the history of SQL and its technical basics. Concepts and definitions will form the solid foundation of your future DBA expertise.

 
LVL 2

Expert Comment

by:zeroreality
ID: 17167573
if you use #elem { display: none; } then the other elemnts around will flow as if #elem isn't there.  In order to do what you are asking (realign elements) you can do that as well with the CSS file.  It is the best way, but also the most difficult because you have to think about how you setup the HTML structure as well as the stylesheet.

I've done this myself a few times myself, if you find a different method, please post it!
0
 

Author Comment

by:angelzworld
ID: 17169784
can u give me an example of rearranging elements by CSS?
0
 
LVL 2

Accepted Solution

by:
zeroreality earned 250 total points
ID: 17178817
Here you go: http://www.baka.ca/test/print.asp

I whipped this up quickly, it doesn't do anything major, but it does demonstrate what I'm talking about.

When printed:
- the navigation is removed
- the page title floats up beside the site title and is underlined
- the 1-800 number in the footer is moved up to under the header
- the phones are displayed in a single column down the centre of the page
- the copyright information is removed

Hopefully this will give you a starting point to figure out how to make only certain objects print and change position.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
Introduction In this tutorial, I'll explain how to create an animated progress meter in a wireframe prototype developed using Axure RP 7.0 - a leading prototyping tool for designing web sites and software. (For more information about Axure and gett…
The purpose of this video is to demonstrate how to create a Printer Friendly PDF on a WordPress Page. This will be demonstrated using a Windows 8 PC. Tools Used are Photoshop, Awesome Screenshot” Google Chrome Extension, and SmallPDF.com Log…
The purpose of this video is to demonstrate how to automatically show related posts at the bottom of a blog post in WordPress. This will be demonstrated using a Windows 8 PC. Plugin “Yet Another Related Posts Plugin” will be used. Go to your…

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question