CSS для средств массовой печати

Итак, у меня есть этот код:CSS для средств массовой печати

HTML:

<body> 
    <div>...</div> 
    <table id="printthis"> 
     <tr> 
      <td>...</td> 
      ... 
      ... 
     </tr> 
    </table> 
    <someOtherElementIdontNeed /> 
    <div>...</div> 
</body>

CSS:

@media print { 
    body *:not(.printable) { 
     display: none; 
    } 
    .printable { 
     position: absolute; 
     top: 0; 
     left: 0; 
    } 
}

JS: (У меня есть где-то в HTML, который вызывает это (для печати))

jQuery(document).ready(function(){ 
    jQuery("#print").click(function(event){ 
     jQuery("#printthis").addClass("printable"); 
     jQuery("#printthis *").addClass("printable"); 
     window.print(); 
    }); 
});

В принципе, я хочу, чтобы все e содержимое <table> будет напечатано, кроме всего остального, что не находится внутри тега. Я вызвал jQuery.addClass, чтобы отличить все, что печатается от того, что нет.

JS-скрипт, кажется, работает нормально, я проверил хром-инструмент, добавив его. Мой css просто, кажется, не узнает их.

Разве это не означает, что переключатель :not() предназначен для обработки? При печати срабатывает, все, что я получаю пустую страницу ... отображая все элементы, которые none не освобождает тех, с .printable класса

источник

2016-07-12 Valkyrurr

'JQuery ("# печать") нажмите кнопку (функция (событие)) { JQuery (": нет (#printthis)"). addClass ('dontprint'); window.print(); }); ' в css. '.dontprin {display: none} 'вы можете попробовать вот так: – guradio

Все элементы INSIDE для печатаемых классов по-прежнему отображаются на дисплее: none. Вот почему вы ничего не видите. – user3154108

@ user3154108, позаботьтесь, чтобы объяснить дальше? Я думаю, что они освобождены от этого правила. – Valkyrurr

пытаются

@media print { 
    body *:not(.printable, .printable *) { 
    display: none; 
    } 
    .printable { 
     position: absolute; 
     top: 0; 
     left: 0; 
    } 
}

источник

2016-07-12 10:34:47 user3154108

видеть здесь jsfiddle

НЕ ТАКИЕ использовать одинаковые идентификаторы (#printthis) вместо этого используйте классы .printthis
, вы не можете дублировать только классы id. поэтому он не работает для вас, но он работает только в этом примере, где есть только один #printthis id

ТАКЖЕ. быть осторожными, чтобы не иметь элемент, который вы хотите print..inside другого элемента, который не имеет класса .printthis

для, например, не использовать

<div> 
    <div class="printthis"> PRINT ME </div> 
</div>

после добавления .printable класса с JQ всем элементы с .printthis, кодом из

@media print { 
body *:not(.printable) { display:none } 
}

скроют родительский элемент и поэтому любой ребенок этого элемента не будет виден при печати

ОБНОВЛЕНО JS КОД

jQuery("#print").click(function(event){ 
    jQuery(".printthis").addClass("printable"); 
    jQuery(".printthis *").addClass("printable"); 
    window.print(); 
});

ОБНОВЛЕНО HTML:

<body> 
<div>DO NOT PRINT</div> 
<table class="printthis"> 
    <tr> 
     <td>SHOW</td> 
     SHOW 
     SHOW 
    </tr> 
</table> 
<div class="printthis">TESTPRINT</div> 
<someOtherElementIdontNeed /> 
<div>DO NOT PRINT</div> 
<button id="print"> PRINT</button> 
</body>

Css:.

@media print { 
body *:not(.printable) { 
    display: none; 
} 
.printable { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
}

источник

2016-07-12 10:35:29

Вы имеете в виду дополнительную ')', которая закрывает '' документ '.ready'? EDIT: это опечатка, извините – Valkyrurr

нет у вас и дополнительных ')' после '(event)' у вас было это: '.click (function (event)) {' you should have'.click (function (event) {' Ошибка: 'Uncaught SyntaxError: Неожиданный токен)' Я удалил '(документ) .ready', потому что это не обязательно в' jsfiddle', но вы можете сохранить его –

Да, я заметил. Это опечатка. фактический код не работает и работает по назначению. – Valkyrurr

CSS для средств массовой печати

ответ

Смежные вопросы