Question

我正在使用jQuery插件jqPrint在页面上仅打印一个容器控件（在我的例子中是一个表）。默认情况下，此“打印容器”应该是不可见的（display:none）。

所以我尝试使用jQuery函数show/hide或toggle切换可见性。但是控件只会在默认情况下可见时打印。

这是打印按钮，我尝试了以下但没有成功：

1

<input type="button" style="width:120px" onclick="javascript:$('#TblPrinterView').toggle().jqprint().toggle(); return false;" value="Print" title="Print" />

2

<input type="button" style="width:120px" onclick="javascript:var tblprint=$('#TblPrinterView');tblprint.show();tblprint.jqprint();tblprint.hide(); return false;" value="Print" title="Print" />

正如我已经提到的，该表只会在最初可见时打印。否则show()或toggle()会显示，打印机对话框会显示，但不会打印。

提前谢谢。

更新：解决方案是 - 感谢waxolunist - 定义媒体打印css。在这种情况下，我不需要切换可打印控件的可见性。默认情况下它可以是不可见的（显示：无）。

这是打印控件的jQuery函数：

<input type="button" style="width:120px" onclick="javascript:$('#TblPrinterView').jqprint(); return false;" value="Print" title="Print" />

这是样式表：

@media print 
{
    .TblPrinterView{display:block;}
}

以下是Plugin：

// -----------------------------------------------------------------------
// Eros Fratini - eros@recoding.it
// jqprint 0.3
//
// - 19/06/2009 - some new implementations, added Opera support
// - 11/05/2009 - first sketch
//
// Printing plug-in for jQuery, evolution of jPrintArea: http://plugins.jquery.com/project/jPrintArea
// requires jQuery 1.3.x
//
// Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
//------------------------------------------------------------------------

(function($) {
    var opt;

    $.fn.jqprint = function (options) {
        opt = $.extend({}, $.fn.jqprint.defaults, options);

        var $element = (this instanceof jQuery) ? this : $(this);

        if (opt.operaSupport && $.browser.opera) 
        { 
            var tab = window.open("","jqPrint-preview");
            tab.document.open();

            var doc = tab.document;
        }
        else 
        {
            var $iframe = $("<iframe  />");

            if (!opt.debug) { $iframe.css({ position: "absolute", width: "0px", height: "0px", left: "-600px", top: "-600px" }); }

            $iframe.appendTo("body");
            var doc = $iframe[0].contentWindow.document;
        }

        if (opt.importCSS)
        {
            if ($("link[media=print]").length > 0) 
            {
                $("link[media=print]").each( function() {
                    doc.write("<link type='text/css' rel='stylesheet' href='" + $(this).attr("href") + "' media='print' />");
                });
            }
            else 
            {
                $("link").each( function() {
                    doc.write("<link type='text/css' rel='stylesheet' href='" + $(this).attr("href") + "' />");
                });
            }
        }

        if (opt.printContainer) { doc.write($element.outer()); }
        else { $element.each( function() { doc.write($(this).html()); }); }

        doc.close();

        (opt.operaSupport && $.browser.opera ? tab : $iframe[0].contentWindow).focus();
        setTimeout( function() { (opt.operaSupport && $.browser.opera ? tab : $iframe[0].contentWindow).print(); if (tab) { tab.close(); } }, 1000);
    }

    $.fn.jqprint.defaults = {
        debug: false,
        importCSS: true, 
        printContainer: true,
        operaSupport: true
    };

    // Thanks to 9__, found at http://users.livejournal.com/9__/380664.html
    jQuery.fn.outer = function() {
      return $($('<div></div>').html(this.clone())).html();
    } 
})(jQuery);

Answer 1

您是否已尝试使用CSS在printMode中仅显示您的容器？我的意思是css media = print visible和media = screen invisible？

  @media print {
    body { font-size: 10pt }
  }
  @media screen {
    body { font-size: 13px }
  }
  @media screen, print {
    body { line-height: 1.2 }
  }

这意味着，第一个语句仅在打印时执行，最后一个在打印和屏幕上执行。媒体类型列表可用http://www.w3.org/TR/CSS2/media.html。

这样你可以控制你的css，具体取决于它显示的设备。

jQuery-Plugin jqPrint - 切换打印控件的可见性

1 个答案: