3

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

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

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

谢谢

4

5 回答 5

4

您是否包含了打印样式表？

于 2010-03-01T15:46:32.550 回答
4

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

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

$("#element").printElement( 

            { 

            overrideElementCSS:[ 

        'thisWillBeTheCSSUsed.css', 

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

            });

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

于 2010-03-01T15:59:01.910 回答
1

请注意 jQueryUI 使用

{display:none !important;}

!important意味着您不能用打印样式表覆盖它，除非您还定义!important（而且我认为您还必须在 jQuery 内容之前的页眉中首先链接到您的打印样式表）

于 2010-09-16T14:14:57.360 回答
0

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

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

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

于 2013-10-15T10:21:44.740 回答
0

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

        <div style="display: none;">
            <div id="printable-area">
                <h1>Lorem ipsum</h1> 
                <p>Lorem ipsum dolor sit amet</p>
            </div>
        </div>
于 2013-12-18T13:56:37.877 回答