// <--- --------------------------------------------------------------------------------------- ---- // Blog Entry: // Ask Ben: Print Part Of A Web Page With jQuery // Author: // Ben Nadel / Kinky Solutions // Link: // http://www.bennadel.com/index.cfm?event=blog.view&id=1591 // Date Posted: // May 21, 2009 at 9:10 PM // ---- --------------------------------------------------------------------------------------- ---> // 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; } var chart = $(this).closest('div.quintile-outer-container').find('div.jqplot-target'); // var imgelem = chart.jqplotToImageElem(); var imageElemStr = chart.jqplotToImageElemStr(); // var statsrows = $(this).closest('div.quintile-outer-container').find('table.stats-table tr'); var statsTable = $('<div></div>').append($(this).closest('div.quintile-outer-container').find('table.stats-table').clone()); // var rowstyles = window.getComputedStyle(statsrows.get(0), ''); // 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>" ); // Typically, would just write out the html. // objDoc.write( this.html() ); // We need to do specific manipulation for kcp quintiles. objDoc.write( '<div class="quintile-outer-container ui-widget ui-corner-all"> \ <div class="quintile-content ui-widget-content ui-corner-bottom"> \ <table class="quintile-display"> \ <tr> \ <td class="chart-cell">'); objDoc.write(imageElemStr); objDoc.write('</td> <td class="stats-cell">'); objDoc.write(statsTable.html()); objDoc.write('</td></tr></table></div></div>'); objDoc.write( "</body>" ); objDoc.write( "</html>" ); objDoc.close(); // // When the iframe is completely loaded, print it. // This seemed worked in IE 9, but caused problems in FF. // // $(objFrame).load(function() { // objFrame.focus(); // objFrame.print(); // }); // // This works in all supported browsers. // Note, might have to adjust time. // setTimeout( function() { objFrame.focus(); objFrame.print(); }, 750); // Have the frame remove itself in about a minute so that // we don't build up too many of these frames. setTimeout( function(){ jFrame.empty(); jFrame.remove(); }, (60 * 1000) ); }