У меня есть следующие CSS для моего стиля печати:Скрыть все элементы, кроме одного DIV для вида печати
* {
display:none;
}
#printableArea {
display:block;
}
Я ожидал, чтобы скрыть всех элементов, а только показать printableArea, однако всех получают скрытый. В режиме печати все, что я получаю, является пустой страницей.
Я включил его правильно в HEAD, с media="print" на этой странице стилей.
Если элемент не отображается, то ни один из его дочерних элементов не будет отображаться (независимо от его свойства отображения).
* соответствует <html> элементам, поэтому весь документ скрыт.
Вам нужно быть более избирательным относительно того, что вы скрываете.
html body * {
display:none;
}
#printableArea {
display:block;
}
Кроме того, вам может понадобиться! Важно на #printableArea, но, вероятно, нет.
Это будет работать только в том случае, если #printableArea - это прямой ребенок тела. –
Если вы хотите использовать JavaScript, вы можете попробовать этот простой фрагмент кода, который даже не требует JQuery:
document.body.innerHTML=document.getElementById('printableArea').innerHTML;
это действие заменит весь HTML, а не требуемый результат –
Вы можете попробовать выскакивают его поверх всего. Это позволило решить 90% моих проблем, тогда мне просто пришлось сделать класс .noprint и добавить его в несколько элементов.
.print_area{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
z-index: 9999;
background-color: #ffffff;
}
Вы принимаете правильный общий подход, но вы хотите использовать visibility: hidden вместо display: none, так что вы можете установить дочерние элементы, чтобы быть видимыми.
Ах, спасибо! Думаю, я мог бы просто разместить printableArea вне оболочки страницы, а затем скрыть оболочку, показывая печатный div. – FatherCarbon
@FatherCarbon - это то, что я только что внедрил, и похоже, что это прекрасно подойдет – Michael12345