Question

我有以下jQueryUI对话框。如何打印对话框的内容？内容可以是任何HTML，如表格，图像等。此问题有几个较早的答案，但是，它们似乎已过时。

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>jQuery UI Dialog</title>
        <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> 
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
        <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>

        <script>
            $(function() {
                $("#openDialog").click(function(){$("#myDialog").dialog('open')});
                $( "#myDialog" ).dialog({
                    modal: true,
                    autoOpen    : false,
                    buttons: {Ok: function() {alert('print');}}
                });
            });
        </script>
    </head>
    <body>
        <button id="openDialog">Click</button>
        <div id="myDialog" title="My Dialog">
            <p>Print this text!</p>
            <img alt="And print this image" src="myImg.png">
        </div>
    </body>
</html>

Answer 1

我开发了自己的插件，代码如下，实时示例位于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'
    });
});

Answer 2

这将添加一个可打印区域，并将模态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，则需要创建新的<div id="divToPrint"></div>，只需使用style="display: none;"

然后当你按下CTRL + P时，它将打印你创建的内容......

Answer 3

尝试以下.....并拨打你的div id。你应该好好去。

buttons: { 
            "Print": function() { 
                $("#dialog").printArea(); 
            },
            "Close": function() { 
               $(this).dialog("close");
            }
        }

将jquery对话框的内容打印到打印机

3 个答案: