[Tutorial] Print links in printable version using javascript

[RohanShenoy]

With screen media, one can easily link pages on the web(Eg:Click here to visit Google) . But when a user 'prints' the page, all your links will probably be lost or atleast won't print as you want them. To avoid this, it would be nice if we could somehow bundle the links with the printed matter. That is what I recently wanted for my website and I found that javascript could easily help me.

To see what I mean, see the below screenshot. It is a printable version of one the pages of my website.



The logic is to extract hyperlinks from the body of print matter and list them seperately near the footer. To see a live example, click the "Print this page" link in bottom-right of this page.

You would be shown as printer friendly format of that page with outbound links from the body-matter extracted and put in a seperate area.

So how do we do that?Its simple 3 steps!

1. Use javascript function to getElementsByTagName. Since we need to get elements with "a" (anchor) tag, we collect all hyperlinks on by document.getElementsByTagName('a'). This will return an array of all hyperlinks in the matter. Lets call this array as links.
2. Calculate size of the above obtained array using links.length function.
3. Now lets run a loop that will execute it as many times as the no. of hyperlinks. In every loop, we perform three actions: 1. Get HREF attribute of a hyperlink. 2. Get TITLE attribute of the hyperlink and 3. We print the hyperlink's title and HREF attribute.

So, our code would look like below

HTML: Select all

var links=document.getElementsByTagName("a"); // returns an array of all hyperlinks
var no=links.length;// Calculates no of hyperlinks 
if(no>0) // execute further action only if atleast 1 hyperlink is found in the matter
{
document.write("Important links from this page have been given below. Please visit them:
")
  for(i=0;iWe start the loop
  {
  href=document.links[i].href;//We obtained the HREF attribute of a hyperlink
  var title=document.links[i].title;//We obtained the TITLE attribute of the same hyperlink
  document.write(""+title+":
=>"+href+"
");} //Now we write the link
  }
else
{
false;// return false if o hyperlink is found in the matter
}

To get this method working, you need to have the TITLE attribut for every link in your matter. If you don't have, then you may decide to skip the title and only print the HREF attribute.

Source: My Web development blog (originally written by me)

[Rakuli]

Wouldn't it be better to actually include the hyperlink in it's original context?

Something like :

Code: Select all

var aLinks = document.getElementsByTagName('a');

var nm = aLinks.length;

for (i=0; i<nm; i++)
  { 
aLinks[i].originalText = aLinks.innerHTML; // Store original text
// Now amend the link
aLinks[i].innerHTML += ' (' + (aLinks[i].title? aLinks[i].title + ' : ' : '') + aLinks[i].href + ')';
// The above will leave original link text but apend the title (if included) and the href in brackets after the link text.
}

// now print the page
window.print();

// now reset the links

for (i=0; i<nm; i++)
{
    aLinks[i].innerHtml = aLinks[i].originalText;
}

That would save printing links down the bottom of the page.

[RohanShenoy]

Originally Posted by Rakuli

Wouldn't it be better to actually include the hyperlink in it's original context?

Something like :

Code: Select all

var aLinks = document.getElementsByTagName('a');

var nm = aLinks.length;

for (i=0; i<nm; i++)
  { 
aLinks[i].originalText = aLinks.innerHTML; // Store original text
// Now amend the link
aLinks[i].innerHTML += ' (' + (aLinks[i].title? aLinks[i].title + ' : ' : '') + aLinks[i].href + ')';
// The above will leave original link text but apend the title (if included) and the href in brackets after the link text.
}

// now print the page
window.print();

// now reset the links

for (i=0; i<nm; i++)
{
    aLinks[i].innerHtml = aLinks[i].originalText;
}

That would save printing links down the bottom of the page.

You mean it would write the HREF attribute of the hyperlink instead of the text inbetween <a> and </a> tags?

[Rakuli]

No it would write the text between the <a> tags and then in parenthesis would write the title of the link (if one exists) and the href.

say I had a link like this

<a href="http://www.example.com" title="Example Website">Hello Rohan!</a>

The printed page would read

Hello Rohan! (Example Website : http://www.example.com)

[RohanShenoy]

Originally Posted by Rakuli

No it would write the text between the <a> tags and then in parenthesis would write the title of the link (if one exists) and the href.

say I had a link like this

<a href="http://www.example.com" title="Example Website">Hello Rohan!</a>

The printed page would read

Hello Rohan! (Example Website : http://www.example.com)

yeah, this one is a nice and persuasive method