JQuery: распечатать скрытый элемент - PullRequest
Новая
       67

JQuery: распечатать скрытый элемент

3 голосов
/ 01 марта 2010

Я использую плагин jQuery Print Element для печати, но я думаю, что это общая проблема CSS:

как я могу распечатать скрытый элемент? (с css для отображения: нет;)

при попытке я получаю только простой лист. есть ли решение?

спасибо

Ответы [ 5 ]

4 голосов
/ 01 марта 2010

Как предполагает DN, использование таблицы стилей печати будет работать хорошо. В таблице стилей печати установите правило CSS для #element {display:block}.

Я смотрю на jQuery.printElement Options , и есть опция overrideElementCSS. Кажется, это именно то, что вам нужно. Вот пример кода: 

$("#element").printElement( 

            { 

            overrideElementCSS:[ 

        'thisWillBeTheCSSUsed.css', 

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

            });

Замените thisWillBeTheCSSUsedAsWell.css на путь к вашей таблице стилей печати, которая имеет правило #element {display:block}.

4 голосов
/ 01 марта 2010
1 голос
/ 16 сентября 2010

учтите, что jQueryUI использует 

{display:none !important;}

!important означает, что вы не можете переопределить его с таблицей стилей печати, если вы не определили также !important (и я думаю, что вы также должны сначала сослаться на свою таблицу стилей печати в заголовке страницы перед jQuery)

0 голосов
/ 18 декабря 2013

Вы также можете заключить свой элемент в элемент div и применить display: none; к этому 

        <div style="display: none;">
            <div id="printable-area">
                <h1>Lorem ipsum</h1> 
                <p>Lorem ipsum dolor sit amet</p>
            </div>
        </div>
0 голосов
/ 15 октября 2013

Кажется, он может печатать только видимые элементы. В моем случае сработало следующее 

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

Я сохранил основной элемент (чтобы он был напечатан видимым и абсолютным) и оставил один поверх него, чтобы он отображался как скрытый.

...