jquery：打印出隐藏元素答案

【问题标题】：jquery: print out hidden elementjquery：打印出隐藏元素
【发布时间】：2011-01-22 08:29:20
【问题描述】：

我正在使用 jQuery Print Element 插件进行打印，但我认为这是一个一般的 css 问题：

如何打印隐藏元素？（将 css 设置为 display:none;）

尝试时，我只得到一张普通的床单。有什么解决办法吗？

谢谢

【问题讨论】：

标签： jquery printing element hidden

【解决方案1】：

您还可以将元素包装在 div 中，然后应用 display: none;到那个

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

【讨论】：

【解决方案2】：

它似乎只能打印可见元素。在我的情况下，以下工作

<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>

我保留了主要元素（要打印可见和绝对），并在其顶部保留一个以使其显示为隐藏。

【讨论】：

【解决方案3】：

请注意，jQueryUI 使用了

{display:none !important;}

!important 意味着您不能用打印样式表覆盖它，除非您还定义了!important（我认为您还必须首先在页面标题中链接到您的打印样式表，然后再添加 jQuery 内容）

【讨论】：

【解决方案4】：

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

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

$("#element").printElement( 

            { 

            overrideElementCSS:[ 

        'thisWillBeTheCSSUsed.css', 

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

            });

将thisWillBeTheCSSUsedAsWell.css 替换为具有#element {display:block} 规则的打印样式表的路径。

【讨论】：

【解决方案5】：

您是否添加了print stylesheet？

【讨论】：