jquery.PrintArea.js 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. /**
  2. * Version 2.1
  3. * -Contributors: "mindinquiring" : filter to exclude any stylesheet other than print.
  4. * Tested ONLY in IE 8 and FF 3.6. No official support for other browsers, but will
  5. * TRY to accomodate challenges in other browsers.
  6. * Example:
  7. * Print Button: <div id="print_button">Print</div>
  8. * Print Area : <div class="PrintArea"> ... html ... </div>
  9. * Javascript : <script>
  10. * $("div#print_button").click(function(){
  11. * $("div.PrintArea").printArea( [OPTIONS] );
  12. * });
  13. * </script>
  14. * options are passed as json (json example: {mode: "popup", popClose: false})
  15. *
  16. * {OPTIONS} | [type] | (default), values | Explanation
  17. * --------- | --------- | ---------------------- | -----------
  18. * @mode | [string] | ("iframe"),"popup" | printable window is either iframe or browser popup
  19. * @popHt | [number] | (500) | popup window height
  20. * @popWd | [number] | (400) | popup window width
  21. * @popX | [number] | (500) | popup window screen X position
  22. * @popY | [number] | (500) | popup window screen Y position
  23. * @popTitle | [string] | ('') | popup window title element
  24. * @popClose | [boolean] | (false),true | popup window close after printing
  25. * @strict | [boolean] | (undefined),true,false | strict or loose(Transitional) html 4.01 document standard or undefined to not include at all (only for popup option)
  26. */
  27. (function($) {
  28. var counter = 0;
  29. var modes = { iframe : "iframe", popup : "popup" };
  30. var defaults = { mode : modes.iframe,
  31. popHt : 500,
  32. popWd : 400,
  33. popX : 200,
  34. popY : 200,
  35. popTitle : '',
  36. popClose : false };
  37. var settings = {};//global settings
  38. $.fn.printArea = function( options )
  39. {
  40. $.extend( settings, defaults, options );
  41. counter++;
  42. var idPrefix = "printArea_";
  43. $( "[id^=" + idPrefix + "]" ).remove();
  44. var ele = getFormData( $(this) );
  45. settings.id = idPrefix + counter;
  46. var writeDoc;
  47. var printWindow;
  48. switch ( settings.mode )
  49. {
  50. case modes.iframe :
  51. var f = new Iframe();
  52. writeDoc = f.doc;
  53. printWindow = f.contentWindow || f;
  54. break;
  55. case modes.popup :
  56. printWindow = new Popup();
  57. writeDoc = printWindow.doc;
  58. }
  59. writeDoc.open();
  60. writeDoc.write( docType() + "<html>" + getHead() + getBody(ele) + "</html>" );
  61. writeDoc.close();
  62. printWindow.focus();
  63. printWindow.print();
  64. if ( settings.mode == modes.popup && settings.popClose )
  65. printWindow.close();
  66. }
  67. function docType()
  68. {
  69. if ( settings.mode == modes.iframe || !settings.strict ) return "";
  70. var standard = settings.strict == false ? " Trasitional" : "";
  71. var dtd = settings.strict == false ? "loose" : "strict";
  72. return '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01' + standard + '//EN" "http://www.w3.org/TR/html4/' + dtd + '.dtd">';
  73. }
  74. function getHead()
  75. {
  76. var head = "<head><title>" + settings.popTitle + "</title>";
  77. $(document).find("link")
  78. .filter(function(){
  79. return $(this).attr("rel").toLowerCase() == "stylesheet";
  80. })
  81. .filter(function(){ // this filter contributed by "mindinquiring"
  82. var media = $(this).attr("media");
  83. return (media.toLowerCase() == "" || media.toLowerCase() == "print")
  84. })
  85. .each(function(){
  86. head += '<link type="text/css" rel="stylesheet" href="' + $(this).attr("href") + '" >';
  87. });
  88. head += "</head>";
  89. return head;
  90. }
  91. function getBody( printElement )
  92. {
  93. return '<body><div class="' + $(printElement).attr("class") + '">' + $(printElement).html() + '</div></body>';
  94. }
  95. function getFormData( ele )
  96. {
  97. $("input,select,textarea", ele).each(function(){
  98. // In cases where radio, checkboxes and select elements are selected and deselected, and the print
  99. // button is pressed between select/deselect, the print screen shows incorrectly selected elements.
  100. // To ensure that the correct inputs are selected, when eventually printed, we must inspect each dom element
  101. var type = $(this).attr("type");
  102. if ( type == "radio" || type == "checkbox" )
  103. {
  104. if ( $(this).is(":not(:checked)") ) this.removeAttribute("checked");
  105. else this.setAttribute( "checked", true );
  106. }
  107. else if ( type == "text" )
  108. this.setAttribute( "value", $(this).val() );
  109. else if ( type == "select-multiple" || type == "select-one" )
  110. $(this).find( "option" ).each( function() {
  111. if ( $(this).is(":not(:selected)") ) this.removeAttribute("selected");
  112. else this.setAttribute( "selected", true );
  113. });
  114. else if ( type == "textarea" )
  115. {
  116. var v = $(this).attr( "value" );
  117. if ($.browser.mozilla)
  118. {
  119. if (this.firstChild) this.firstChild.textContent = v;
  120. else this.textContent = v;
  121. }
  122. else this.innerHTML = v;
  123. }
  124. });
  125. return ele;
  126. }
  127. function Iframe()
  128. {
  129. var frameId = settings.id;
  130. var iframeStyle = 'border:0;position:absolute;width:0px;height:0px;left:0px;top:0px;';
  131. var iframe;
  132. try
  133. {
  134. iframe = document.createElement('iframe');
  135. document.body.appendChild(iframe);
  136. $(iframe).attr({ style: iframeStyle, id: frameId, src: "" });
  137. iframe.doc = null;
  138. iframe.doc = iframe.contentDocument ? iframe.contentDocument : ( iframe.contentWindow ? iframe.contentWindow.document : iframe.document);
  139. }
  140. catch( e ) { throw e + ". iframes may not be supported in this browser."; }
  141. if ( iframe.doc == null ) throw "Cannot find document.";
  142. return iframe;
  143. }
  144. function Popup()
  145. {
  146. var windowAttr = "location=yes,statusbar=no,directories=no,menubar=no,titlebar=no,toolbar=no,dependent=no";
  147. windowAttr += ",width=" + settings.popWd + ",height=" + settings.popHt;
  148. windowAttr += ",resizable=yes,screenX=" + settings.popX + ",screenY=" + settings.popY + ",personalbar=no,scrollbars=no";
  149. var newWin = window.open( "", "_blank", windowAttr );
  150. newWin.doc = newWin.document;
  151. return newWin;
  152. }
  153. })(jQuery);