当前位置：文江博客话题详情

jquery：打印出隐藏元素

发布于 2024-08-23 21:46:09 字数 137 浏览 9 评论 0原文

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

如何打印隐藏元素？（将CSS设置为显示：无；）

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

谢谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

陌若浮生 2024-08-30 21:46:09

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

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

$("#element").printElement( 

            { 

            overrideElementCSS:[ 

        'thisWillBeTheCSSUsed.css', 

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

            });

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

As DN suggest, using a print stylesheet will work nicely. On the print stylesheet, set your css rule to #element {display:block}.

I'm looking at the jQuery.printElement Options, and there is an option overrideElementCSS. It seems to be just what you need. Here is the example code:

$("#element").printElement( 

            { 

            overrideElementCSS:[ 

        'thisWillBeTheCSSUsed.css', 

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

            });

Replace thisWillBeTheCSSUsedAsWell.css with the path to your print stylesheet which has the #element {display:block} rule.

回复收藏 0 原文

两人的回忆 2024-08-30 21:46:09

您是否包含打印样式表？

回复收藏 0 原文

小苏打饼 2024-08-30 21:46:09

请注意，jQueryUI 使用

{display:none !important;}

!important 意味着您无法使用打印样式表覆盖它，除非您还定义了 !important （而且我认为您还必须链接到您的打印样式表首先在页面标题中，在 jQuery 之前）

mind you that jQueryUI uses

{display:none !important;}

!important means you can't override it with the print stylesheet unless you also define !important (and I think you also have to link to your print stylesheet first in the page header before the jQuery stuff)

回复收藏 0 原文

说谎友 2024-08-30 21:46:09

看来它只能打印可见元素。就我而言，以下工作有效，

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

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

It seems it could print only visible elements. In my case the following worked

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

I kept the main element(to be printed visible and absolute), and kept one on top of it to appear it as hidden.

回复收藏 0 原文

乜一 2024-08-30 21:46:09

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

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

You can also wrap your element in a div, and apply display: none; to that

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

回复收藏 0 原文

~没有更多了~