kcp.print.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. // <--- --------------------------------------------------------------------------------------- ----
  2. // Blog Entry:
  3. // Ask Ben: Print Part Of A Web Page With jQuery
  4. // Author:
  5. // Ben Nadel / Kinky Solutions
  6. // Link:
  7. // http://www.bennadel.com/index.cfm?event=blog.view&id=1591
  8. // Date Posted:
  9. // May 21, 2009 at 9:10 PM
  10. // ---- --------------------------------------------------------------------------------------- --->
  11. // Create a jquery plugin that prints the given element.
  12. jQuery.fn.print = function(){
  13. // NOTE: We are trimming the jQuery collection down to the
  14. // first element in the collection.
  15. if (this.size() > 1){
  16. this.eq( 0 ).print();
  17. return;
  18. } else if (!this.size()){
  19. return;
  20. }
  21. var chart = $(this).closest('div.quintile-outer-container').find('div.jqplot-target');
  22. // var imgelem = chart.jqplotToImageElem();
  23. var imageElemStr = chart.jqplotToImageElemStr();
  24. // var statsrows = $(this).closest('div.quintile-outer-container').find('table.stats-table tr');
  25. var statsTable = $('<div></div>').append($(this).closest('div.quintile-outer-container').find('table.stats-table').clone());
  26. // var rowstyles = window.getComputedStyle(statsrows.get(0), '');
  27. // ASSERT: At this point, we know that the current jQuery
  28. // collection (as defined by THIS), contains only one
  29. // printable element.
  30. // Create a random name for the print frame.
  31. var strFrameName = ("printer-" + (new Date()).getTime());
  32. // Create an iFrame with the new name.
  33. var jFrame = $( "<iframe name='" + strFrameName + "'>" );
  34. // Hide the frame (sort of) and attach to the body.
  35. jFrame
  36. .css( "width", "1px" )
  37. .css( "height", "1px" )
  38. .css( "position", "absolute" )
  39. .css( "left", "-9999px" )
  40. .appendTo( $( "body:first" ) )
  41. ;
  42. // Get a FRAMES reference to the new frame.
  43. var objFrame = window.frames[ strFrameName ];
  44. // Get a reference to the DOM in the new frame.
  45. var objDoc = objFrame.document;
  46. // Grab all the style tags and copy to the new
  47. // document so that we capture look and feel of
  48. // the current document.
  49. // Create a temp document DIV to hold the style tags.
  50. // This is the only way I could find to get the style
  51. // tags into IE.
  52. var jStyleDiv = $( "<div>" ).append(
  53. $( "style" ).clone()
  54. );
  55. // Write the HTML for the document. In this, we will
  56. // write out the HTML of the current element.
  57. objDoc.open();
  58. objDoc.write( "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">" );
  59. objDoc.write( "<html>" );
  60. objDoc.write( "<body>" );
  61. objDoc.write( "<head>" );
  62. objDoc.write( "<title>" );
  63. objDoc.write( document.title );
  64. objDoc.write( "</title>" );
  65. objDoc.write( jStyleDiv.html() );
  66. objDoc.write( "</head>" );
  67. // Typically, would just write out the html.
  68. // objDoc.write( this.html() );
  69. // We need to do specific manipulation for kcp quintiles.
  70. objDoc.write( '<div class="quintile-outer-container ui-widget ui-corner-all"> \
  71. <div class="quintile-content ui-widget-content ui-corner-bottom"> \
  72. <table class="quintile-display"> \
  73. <tr> \
  74. <td class="chart-cell">');
  75. objDoc.write(imageElemStr);
  76. objDoc.write('</td> <td class="stats-cell">');
  77. objDoc.write(statsTable.html());
  78. objDoc.write('</td></tr></table></div></div>');
  79. objDoc.write( "</body>" );
  80. objDoc.write( "</html>" );
  81. objDoc.close();
  82. //
  83. // When the iframe is completely loaded, print it.
  84. // This seemed worked in IE 9, but caused problems in FF.
  85. //
  86. // $(objFrame).load(function() {
  87. // objFrame.focus();
  88. // objFrame.print();
  89. // });
  90. //
  91. // This works in all supported browsers.
  92. // Note, might have to adjust time.
  93. //
  94. setTimeout(
  95. function() {
  96. objFrame.focus();
  97. objFrame.print();
  98. }, 750);
  99. // Have the frame remove itself in about a minute so that
  100. // we don't build up too many of these frames.
  101. setTimeout(
  102. function(){
  103. jFrame.empty();
  104. jFrame.remove();
  105. },
  106. (60 * 1000)
  107. );
  108. }