jQuery.print.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275
  1. (function ($) {
  2. "use strict";
  3. // A nice closure for our definitions
  4. function jQueryCloneWithSelectAndTextAreaValues(elmToClone, withDataAndEvents, deepWithDataAndEvents) {
  5. // Replacement jQuery clone that also clones the values in selects and textareas as jQuery doesn't for performance reasons - https://stackoverflow.com/questions/742810/clone-isnt-cloning-select-values
  6. // Based on https://github.com/spencertipping/jquery.fix.clone
  7. var $elmToClone = $(elmToClone),
  8. $result = $elmToClone.clone(withDataAndEvents, deepWithDataAndEvents),
  9. $myTextareas = $elmToClone.find('textarea').add($elmToClone.filter('textarea')),
  10. $resultTextareas = $result.find('textarea').add($result.filter('textarea')),
  11. $mySelects = $elmToClone.find('select').add($elmToClone.filter('select')),
  12. $resultSelects = $result.find('select').add($result.filter('select')),
  13. i, l, j, m;
  14. for (i = 0, l = $myTextareas.length; i < l; ++i) {
  15. $($resultTextareas[i]).val($($myTextareas[i]).val());
  16. }
  17. for (i = 0, l = $mySelects.length; i < l; ++i) {
  18. for (j = 0, m = $mySelects[i].options.length; j < m; ++j) {
  19. if ($mySelects[i].options[j].selected === true) {
  20. $resultSelects[i].options[j].selected = true;
  21. }
  22. }
  23. }
  24. return $result;
  25. }
  26. function getjQueryObject(string) {
  27. // Make string a vaild jQuery thing
  28. var jqObj = $("");
  29. try {
  30. jqObj = jQueryCloneWithSelectAndTextAreaValues(string);
  31. } catch (e) {
  32. jqObj = $("<span />")
  33. .html(string);
  34. }
  35. return jqObj;
  36. }
  37. function printFrame(frameWindow, content, options) {
  38. // Print the selected window/iframe
  39. var def = $.Deferred();
  40. try {
  41. frameWindow = frameWindow.contentWindow || frameWindow.contentDocument || frameWindow;
  42. var wdoc = frameWindow.document || frameWindow.contentDocument || frameWindow;
  43. if(options.doctype) {
  44. wdoc.write(options.doctype);
  45. }
  46. wdoc.write(content);
  47. wdoc.close();
  48. var printed = false,
  49. callPrint = function () {
  50. if(printed) {
  51. return;
  52. }
  53. // Fix for IE : Allow it to render the iframe
  54. frameWindow.focus();
  55. try {
  56. // Fix for IE11 - printng the whole page instead of the iframe content
  57. if (!frameWindow.document.execCommand('print', false, null)) {
  58. // document.execCommand returns false if it failed -http://stackoverflow.com/a/21336448/937891
  59. frameWindow.print();
  60. }
  61. // focus body as it is losing focus in iPad and content not getting printed
  62. $('body').focus();
  63. } catch (e) {
  64. frameWindow.print();
  65. }
  66. frameWindow.close();
  67. printed = true;
  68. def.resolve();
  69. };
  70. // Print once the frame window loads - seems to work for the new-window option but unreliable for the iframe
  71. $(frameWindow).on("load", callPrint);
  72. // Fallback to printing directly if the frame doesn't fire the load event for whatever reason
  73. setTimeout(callPrint, options.timeout);
  74. } catch (err) {
  75. def.reject(err);
  76. }
  77. return def;
  78. }
  79. function printContentInIFrame(content, options) {
  80. var $iframe = $(options.iframe + "");
  81. var iframeCount = $iframe.length;
  82. if (iframeCount === 0) {
  83. // Create a new iFrame if none is given
  84. $iframe = $('<iframe height="0" width="0" border="0" wmode="Opaque"/>')
  85. .prependTo('body')
  86. .css({
  87. "position": "absolute",
  88. "top": -999,
  89. "left": -999
  90. });
  91. }
  92. var frameWindow = $iframe.get(0);
  93. return printFrame(frameWindow, content, options)
  94. .done(function () {
  95. // Success
  96. setTimeout(function () {
  97. // Wait for IE
  98. if (iframeCount === 0) {
  99. // Destroy the iframe if created here
  100. $iframe.remove();
  101. }
  102. }, 1000);
  103. })
  104. .fail(function (err) {
  105. // Use the pop-up method if iframe fails for some reason
  106. console.error("Failed to print from iframe", err);
  107. printContentInNewWindow(content, options);
  108. })
  109. .always(function () {
  110. try {
  111. options.deferred.resolve();
  112. } catch (err) {
  113. console.warn('Error notifying deferred', err);
  114. }
  115. });
  116. }
  117. function printContentInNewWindow(content, options) {
  118. // Open a new window and print selected content
  119. var frameWindow = window.open();
  120. return printFrame(frameWindow, content, options)
  121. .always(function () {
  122. try {
  123. options.deferred.resolve();
  124. } catch (err) {
  125. console.warn('Error notifying deferred', err);
  126. }
  127. });
  128. }
  129. function isNode(o) {
  130. /* http://stackoverflow.com/a/384380/937891 */
  131. return !!(typeof Node === "object" ? o instanceof Node : o && typeof o === "object" && typeof o.nodeType === "number" && typeof o.nodeName === "string");
  132. }
  133. $.print = $.fn.print = function () {
  134. // Print a given set of elements
  135. var options, $this, self = this;
  136. // console.log("Printing", this, arguments);
  137. if (self instanceof $) {
  138. // Get the node if it is a jQuery object
  139. self = self.get(0);
  140. }
  141. if (isNode(self)) {
  142. // If `this` is a HTML element, i.e. for
  143. // $(selector).print()
  144. $this = $(self);
  145. if (arguments.length > 0) {
  146. options = arguments[0];
  147. }
  148. } else {
  149. if (arguments.length > 0) {
  150. // $.print(selector,options)
  151. $this = $(arguments[0]);
  152. if (isNode($this[0])) {
  153. if (arguments.length > 1) {
  154. options = arguments[1];
  155. }
  156. } else {
  157. // $.print(options)
  158. options = arguments[0];
  159. $this = $("html");
  160. }
  161. } else {
  162. // $.print()
  163. $this = $("html");
  164. }
  165. }
  166. // Default options
  167. var defaults = {
  168. globalStyles: true,
  169. mediaPrint: false,
  170. stylesheet: null,
  171. noPrintSelector: ".no-print",
  172. iframe: true,
  173. append: null,
  174. prepend: null,
  175. manuallyCopyFormValues: true,
  176. deferred: $.Deferred(),
  177. timeout: 750,
  178. title: null,
  179. doctype: '<!doctype html>'
  180. };
  181. // Merge with user-options
  182. options = $.extend({}, defaults, (options || {}));
  183. var $styles = $("");
  184. if (options.globalStyles) {
  185. // Apply the stlyes from the current sheet to the printed page
  186. $styles = $("style, link, meta, base, title");
  187. } else if (options.mediaPrint) {
  188. // Apply the media-print stylesheet
  189. $styles = $("link[media=print]");
  190. }
  191. if (options.stylesheet) {
  192. // Add a custom stylesheet if given
  193. $styles = $.merge($styles, $('<link rel="stylesheet" href="' + options.stylesheet + '">'));
  194. }
  195. // Create a copy of the element to print
  196. var copy = jQueryCloneWithSelectAndTextAreaValues($this);
  197. // Wrap it in a span to get the HTML markup string
  198. copy = $("<span/>")
  199. .append(copy);
  200. // Remove unwanted elements
  201. copy.find(options.noPrintSelector)
  202. .remove();
  203. // Add in the styles
  204. copy.append(jQueryCloneWithSelectAndTextAreaValues($styles));
  205. // Update title
  206. if (options.title) {
  207. var title = $("title", copy);
  208. if (title.length === 0) {
  209. title = $("<title />");
  210. copy.append(title);
  211. }
  212. title.text(options.title);
  213. }
  214. // Appedned content
  215. copy.append(getjQueryObject(options.append));
  216. // Prepended content
  217. copy.prepend(getjQueryObject(options.prepend));
  218. if (options.manuallyCopyFormValues) {
  219. // Manually copy form values into the HTML for printing user-modified input fields
  220. // http://stackoverflow.com/a/26707753
  221. copy.find("input")
  222. .each(function () {
  223. var $field = $(this);
  224. if ($field.is("[type='radio']") || $field.is("[type='checkbox']")) {
  225. if ($field.prop("checked")) {
  226. $field.attr("checked", "checked");
  227. }
  228. } else {
  229. $field.attr("value", $field.val());
  230. }
  231. });
  232. copy.find("select").each(function () {
  233. var $field = $(this);
  234. $field.find(":selected").attr("selected", "selected");
  235. });
  236. copy.find("textarea").each(function () {
  237. // Fix for https://github.com/DoersGuild/jQuery.print/issues/18#issuecomment-96451589
  238. var $field = $(this);
  239. $field.text($field.val());
  240. });
  241. }
  242. // Get the HTML markup string
  243. var content = copy.html();
  244. // Notify with generated markup & cloned elements - useful for logging, etc
  245. try {
  246. options.deferred.notify('generated_markup', content, copy);
  247. } catch (err) {
  248. console.warn('Error notifying deferred', err);
  249. }
  250. // Destroy the copy
  251. copy.remove();
  252. if (options.iframe) {
  253. // Use an iframe for printing
  254. try {
  255. printContentInIFrame(content, options);
  256. } catch (e) {
  257. // Use the pop-up method if iframe fails for some reason
  258. console.error("Failed to print from iframe", e.stack, e.message);
  259. printContentInNewWindow(content, options);
  260. }
  261. } else {
  262. // Use a new window for printing
  263. printContentInNewWindow(content, options);
  264. }
  265. return this;
  266. };
  267. })(jQuery);