123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136 |
- // <--- --------------------------------------------------------------------------------------- ----
-
- // 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)
- );
- }
|