How to Print the Contents of a Web Page Using JavaScript

When I am out and about on appointments for my computer repair business, I frequently encounter customers having difficulty printing web pages they like. They usually try using the “CONTROL-P” hotkey for the “File -> Print” function of their web browser to print the currently displayed web page. This will print something, but it will most likely be a disorganized scattering of the current web page across any number of pieces of paper. Wouldn't it be nice to have an easier and more reliable way to print selective content from the currently displayed web page?

Here I will present JavaScript code I have used in some of my websites for printing the currently displayed page content in a neat, predictable fashion. First let's have a look at some sample HTML content that we would like to output to a printer.

< div id = "maincontainer" >
< div id = "topsection" > < /div>
<div id="leftcolumn">
<div class="leftborder1">
<H2><a href="http:/ / www.anysite.com / index.html ">Home</a></H2>
</div>
<div class="
leftborder1 ">
<H2><a href="
http: //www.anysite.com/aboutus.html">About Us</a></H2>
<
/div>
</div >
< div id = "contentcolumn" > < div class = "innertube" >
< H1 > < em > The Home Page < /em></H1 >
< script type = "text/javascript" >
<!--
document.write("<H6>
Home Page
<img src='GenericLogo.jpg' width='112' height='112'> ®
<form id='printMe' name='printMe'><input type='button' name='printMe' onClick='printSpecial()' value='Print Content Column'> </form>
</H6>");
//-->
<
/script>
<H2><em>
<ul STYLE="list-style-image: url(right_arrow.bmp)"><li>Here is the first description line.</li > < /ul>
<ul STYLE="list-style-image: url(right_arrow.bmp)"><li> Here is the second description line.</li > < /ul>
<ul STYLE="list-style-image: url(right_arrow.bmp)"><li> Here is the third description line.</li > < /ul>
</em > < /H2>
<H2><em>Here is the summary line.</em > < /H2>
</div > < /div>
</div >

In the preceding HTML content, we only want to print what is contained in the “contentcolumn” division. Notice near the top of this code patch, I am using the JavaScript “document.write” directive to encapsulate and process a HTML “form” tag that encloses a HTML “input” tag. The input tag from the preceding is:

“<input type='button' name='printMe' onClick='printSpecial()' value='Print Content Column '>”

This is a button labeled “Print Content Column”. With a mouse press, the “onClick” event fires the JavaScript function “printSpecial()”, that handles the printing process as detailed below:

< script language = "JavaScript" >
var gAutoPrint = true;
function printSpecial(){
    var html = '<style media="all" type="text/css">';
    html += 'body, html{margin:0; padding:0; line-height: 1.0em; z-index: 0;}';
    html += 'H1{font-size: 9pt; font-family: arial; z-index: 0;}';
    html += 'H2{font-size: 9pt; font-family: arial; font-style: italic; z-index: 0;}';
    html += 'em{color: #000000;}';
    html += '#watermark{position:absolute; z-index: -1; filter:alpha(opacity=15); -moz-opacity: 15%; opacity: 0.15; -khtml-                            opacity: 0.15; top: 0; left: 0; height: 100%; width: 100%;}';
    html += '</style>';
    html += '<div id="watermark"><img src="GenericLogo.jpg" width="100%" height="100%"></div>';
    html += '<H1><em>The Home Page</em></H1>';
    html += '<H2><em>';
    html += '<ul STYLE="list-style-image: url(checkbox.gif)"><li>  Here is the first description line.</li></ul>';
    html += '<ul STYLE="list-style-image: url(checkbox.gif)"><li>  Here is the second description line.</li></ul>';
    html += '<ul STYLE="list-style-image: url(checkbox.gif)"><li>  Here is the third description line.</li></ul>';
    html += '</em></H2>';
    html += '<H2><em>Here is the summary line.</em></H2>';
    // preview the output in the Javascript variable “html”,
    // display a print dialog, then wait for the user to click
    // the “Print” button.
    var printWin = window.open("", "printSpecial");
    printWin.document.open();
    printWin.document.write(html);
    printWin.document.close();
    if (gAutoPrint) printWin.print();
}
< /script>

Notice in the JavaScript function “printSpecial()” above, the style sheet info as well as the content from the web page are chronologically concatenated together and stored in a JavaScript variable, “html”. Also, the “GenericLogo.jpg” used as a graphic in the actual web page will be used as a background watermark for the printed output with an opacity of 15%. At the bottom of the function “printSpecial()”, the contents stored in the “html” variable are sent to a new browser screen for previewing accompanied by the print dialog box to await further instructions from the user.

As shown by the preceding code, JavaScript is a versatile application development tool for printing specific sections of web pages. I personally believe this technique should be present in many more web pages for the convenience of site visitors who may want a printed hard copy of selected content.