jQuery插件jqPrint - 切換打印控制的可見性

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()將使其可見，顯示打印機對話框，但不會打印。

預先感謝您。

UPDATE： 的解決方案是 - 感謝waxolunist - 定義介質打印的CSS。通過這種方式，我的事件不需要切換可打印控件的可見性。它可以是不可見的（display：none）。

這是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 { 
    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取決於它顯示的設備。