的jQuery：打印出隐藏的元素

Question

我使用jQuery的打印单元插件，用于打印，但我认为这是一个普通的CSS问题：

我怎么能打印出一个隐藏的元素？ （与CSS设置为显示：无;）

试图时，我只是得到一个普通的工作表。有没有解决方法？

谢谢

Answer 1

由于DN建议，使用打印样式表将很好地工作。在打印样式表中，将您的css规则设置为#element {display:block}。

我正在查看jQuery.printElement Options，并且有一个选项overrideElementCSS。这似乎正是你需要的。下面是示例代码：

$("#element").printElement( 

      { 

      overrideElementCSS:[ 

     'thisWillBeTheCSSUsed.css', 

     { href:'thisWillBeTheCSSUsedAsWell.css',media:'print'}] 

      }); 

更换thisWillBeTheCSSUsedAsWell.css与路径到您的打印样式表，它具有#element {display:block}规则。

Answer 2

您是否包含print stylesheet？

Answer 3

心中你jQueryUI的使用

{display:none !important;} 

!important意味着你不能与打印样式表覆盖它，除非你还定义!important（我想你也必须在第一页链接到您的打印样式表header之前的jQuery的东西）

Answer 4

看来它只能打印可见的元素。在我的情况下，下面的工作

<div id="to-be-printed" style="position:absolute;z-index:-9999;"> 
    <%= render :partial => "printed_version"%> 
</div> 
<div id="to_be_printed_cover" style="position:absolute;z-index:-8999;background-color:white;"> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
    $("div#to_be_printed_cover").css({ 
     height: $("div#to_be_printed").height(), 
     width: $("div#to_be_printed").width(), 
    }); 
    }); 
    </script> 
</div> 

我不停的主要元素（要打印的可见的和绝对的），并保持在它上面的一个显示其为隐藏。

Answer 5

你也可以将你的元素包装在div中，并应用display：none;

 <div style="display: none;"> 
      <div id="printable-area"> 
       <h1>Lorem ipsum</h1> 
       <p>Lorem ipsum dolor sit amet</p> 
      </div> 
     </div>