Question

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

我怎样才能打印出隐藏的元素？（css设置为display：none;）

在尝试的时候，我只开了一张普通纸。有什么解决方案吗？

感谢

Answer 1

您是否添加了print stylesheet？

Answer 2

正如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 3

请注意，jQueryUI使用

{display:none !important;}

!important表示你不能用打印样式表覆盖它，除非你也定义!important（我认为你还必须在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>

jquery：打印出隐藏的元素

5 个答案: