Print Part Of A Web Page With jQuery

To be honest, I’ve never done this before, so I am not sure if the following solution is truly cross browser compliant. The jQuery plugin that I authored below was tested to be working in FireFox, IE 7, Safari, and the latest version of Chrome Beta (although Chrome seemed to have some issues with the images from time to time). Before we get into how it works, take a look at this demo video so you can see what I’m talking about:

As you can see, I created a jQuery plugin to handle the print() functionality. This way, we can make anything on the page printable using a jQuery selector. The caveat being that the containing element is not printed – only it’s child elements get added to the print document. In the following page, when the DOM is ready, we find our link element and have it print (upon click) any element on the page with the class “printable:”

 Launch code in new window » Download code as text file »

  • <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
  • <html>
  • <head>
  • <title>Print Part of a Page With jQuery</title>
  • <script type=”text/javascript” src=”jquery-1.3.2.js”></script>
  • <script type=”text/javascript” src=”jquery.print.js”></script>
  • <script type=”text/javascript”>
  • // When the document is ready, initialize the link so
  • // that when it is clicked, the printable area of the
  • // page will print.
  • $(
  • function(){
  • // Hook up the print link.
  • $( “a” )
  • .attr( “href”, “javascript:void( 0 )” )
  • .click(
  • function(){
  • // Print the DIV.
  • $( “.printable” ).print();
  • // Cancel click event.
  • return( false );
  • }
  • )
  • ;
  • }
  • );
  • </script>
  • <style type=”text/css”>
  • body {
  • font-family: verdana ;
  • font-size: 14px ;
  • }
  • h1 {
  • font-size: 180% ;
  • }
  • h2 {
  • border-bottom: 1px solid #999999 ;
  • }
  • .printable {
  • border: 1px dotted #CCCCCC ;
  • padding: 10px 10px 10px 10px ;
  • }
  • img {
  • background-color: #E0E0E0 ;
  • border: 1px solid #666666 ;
  • padding: 5px 5px 5px 5px ;
  • }
  • a {
  • color: red ;
  • }
  • </style>
  • </head>
  • <body>
  • <h1>
  • Print Part of a Page With jQuery
  • </h1>
  • <p>
  • <a>Print Bio</a>
  • </p>
  • <div class=”printable”>
  • <h2>
  • Jen Rish
  • </h2>
  • <p>
  • Jen Rish, upcoming fitness and figure model has some
  • crazy developed legs!
  • </p>
  • <p>
  • <img
  • src=”jen_rish_crazy_legs.jpg”
  • width=”380″
  • height=”570″
  • alt=”Jen Rish Has Amazing Legs!”
  • />
  • </p>
  • <p>
  • I bet she does some <strong>serious squatting</strong>!
  • </p>
  • </div>
  • </body>
  • </html>

And, here is the jQuery plugin, print(), that powers this solution:

 Launch code in new window » Download code as text file »

  • // Create a jquery plugin that prints the given element.
  • jQuery.fn.print = function(){
  • // NOTE: We are trimming the jQuery collection down to the
  • // first element in the collection.
  • if (this.size() > 1){
  • this.eq( 0 ).print();
  • return;
  • } else if (!this.size()){
  • return;
  • }
  • // ASSERT: At this point, we know that the current jQuery
  • // collection (as defined by THIS), contains only one
  • // printable element.
  • // Create a random name for the print frame.
  • var strFrameName = (“printer-” + (new Date()).getTime());
  • // Create an iFrame with the new name.
  • var jFrame = $( “<iframe name='” + strFrameName + “‘>” );
  • // Hide the frame (sort of) and attach to the body.
  • jFrame
  • .css( “width”, “1px” )
  • .css( “height”, “1px” )
  • .css( “position”, “absolute” )
  • .css( “left”, “-9999px” )
  • .appendTo( $( “body:first” ) )
  • ;
  • // Get a FRAMES reference to the new frame.
  • var objFrame = window.frames[ strFrameName ];
  • // Get a reference to the DOM in the new frame.
  • var objDoc = objFrame.document;
  • // Grab all the style tags and copy to the new
  • // document so that we capture look and feel of
  • // the current document.
  • // Create a temp document DIV to hold the style tags.
  • // This is the only way I could find to get the style
  • // tags into IE.
  • var jStyleDiv = $( “<div>” ).append(
  • $( “style” ).clone()
  • );
  • // Write the HTML for the document. In this, we will
  • // write out the HTML of the current element.
  • objDoc.open();
  • objDoc.write( “<!DOCTYPE html PUBLIC \”-//W3C//DTD XHTML 1.0 Transitional//EN\” \”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\”>” );
  • objDoc.write( “<html>” );
  • objDoc.write( “<body>” );
  • objDoc.write( “<head>” );
  • objDoc.write( “<title>” );
  • objDoc.write( document.title );
  • objDoc.write( “</title>” );
  • objDoc.write( jStyleDiv.html() );
  • objDoc.write( “</head>” );
  • objDoc.write( this.html() );
  • objDoc.write( “</body>” );
  • objDoc.write( “</html>” );
  • objDoc.close();
  • // Print the document.
  • objFrame.focus();
  • objFrame.print();
  • // Have the frame remove itself in about a minute so that
  • // we don’t build up too many of these frames.
  • setTimeout(
  • function(){
  • jFrame.remove();
  • },
  • (60 * 1000)
  • );
  • }

The plugin itself is not too complicated – we are creating an IFrame on the fly, writing the target HTML to its body, and then printing it. It’s a simple concept, but there were some issues getting it to work in Internet Explorer (IE). The following caveats tripped me up at first:

  • In IE, you have to focus() the IFrame before you print it other wise the top page prints.
  • In IE, I kept getting errors when trying to use jQuery to write the STYLE tags to the IFrame head. As such, I had to write the html() of the STYLE tags as I was writing out the document. The Style tags are crucial to in the document because they will determine the look and feel of the printed content.

Once I got those two issues out of the way, the rest worked pretty smoothly. I am not sure if this is the best technique, but hopefully it will point you in the right direction.

Download Code Snippet ZIP File

Advertisements
By Rz Rasel Posted in jQuery

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s