将jquery对话框的内容打印到打印机
我有以下jQueryUI对话框。 如何打印对话框的内容？ 内容可以是任何HTML，如表格，图像等。这个问题有几个早期的答案，但是，它们似乎已经过时了。
jQuery UI Dialog $(function() { $("#openDialog").click(function(){$("#myDialog").dialog('open')}); $( "#myDialog" ).dialog({ modal: true, autoOpen : false, buttons: {Ok: function() {alert('print');}} }); }); Print this text!
我开发了自己的插件，下面是代码，现场示例位于http://jsfiddle.net/fyu4P/embedded/result/ 。
在FF 26.0上，它可以工作，但是，在打印几次后，FF会询问用户是否应该禁用弹出窗口我希望不会发生。 此外，它不适用于旧版IE，也可能适用于其他浏览器。 不用担心，打印时，您仍然需要单击操作系统打印对话框，这样您就不会浪费任何纸张了！ 我已经向https://codereview.stackexchange.com/questions/39235/critique-of-jquery-plugin-which-will-print-to-a-printer-an-element-or-a-jqueryui询问了任何建议。
实际插件：
/* * jQuery printIt * Print's the selected elements to the printer * Copyright Michael Reed, 2014 * Dual licensed under the MIT and GPL licenses. */ (function($){ var defaults = { elems :null, //Element to print HTML copy_css :false,//Copy CSS from original element external_css :null //New external css file to apply }; var methods = { init : function (options) { var settings = $.extend({}, defaults, options) elems=$(settings.elems); return this.each(function () { $(this).click(function(e) { var iframe = document.createElement('iframe'); document.body.appendChild(iframe); $(iframe).load(function(){ elems.each(function(){ iframe.contentWindow.document.body.appendChild(this.cloneNode(true)); }); if(settings.copy_css) { var arrStyleSheets = document.getElementsByTagName("link"); for (var i = 0; i < arrStyleSheets.length; i++){ iframe.contentWindow.document.head.appendChild(arrStyleSheets[i].cloneNode(true)); } var arrStyle = document.getElementsByTagName("style"); for (var i = 0; i < arrStyle.length; i++){ iframe.contentWindow.document.head.appendChild(arrStyle[i].cloneNode(true)); } } if(settings.external_css) { var style = document.createElement("link") style.rel = 'stylesheet'; style.type = 'text/css'; style.href = settings.external_css; iframe.contentWindow.document.head.appendChild(style); } var script = document.createElement('script'); script.type = 'text/javascript'; script.text = 'window.print();'; iframe.contentWindow.document.head.appendChild(script); $(iframe).hide(); }); }); }); }, destroy : function () { //Anything else I should do here? delete settings; return this.each(function () {}); } }; $.fn.printIt = function(method) { if (methods[method]) { return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof method === 'object' || ! method) { return methods.init.apply(this, arguments); } else { $.error('Method ' + method + ' does not exist on jQuery.printIt'); } }; }(jQuery) );
要配置：
$(function () { $("#openDialog").click(function () { $("#myDialog").dialog('open') }); $("#myDialog").dialog({ modal: true, autoOpen: false }); $('#printIt').printIt({ elems: $("#myDialog"), copy_css: true, external_css: 'test2.css' }); });
这将添加一个可打印区域，并将模态html放入其中。
$(function () { $("#openDialog").click(function () { $("#myDialog").dialog('open') }); $("#myDialog").dialog({ modal: true, autoOpen: false, buttons: { Ok: function (e) { $('#divToPrint').html($(this)[0].innerHTML).printArea(); } } }); });
如果你不想显示新的div，你需要创建一个新的
，只需使用style="display: none;"
然后当你按CTRL + P它将打印你创建的…
尝试以下…..并拨打你的div id。 你应该好好去。
buttons: { "Print": function() { $("#dialog").printArea(); }, "Close": function() { $(this).dialog("close"); } }