Скрыть все элементы, кроме одного div для печати

У меня есть следующий CSS для моего стиля печати:

* {
 display:none;
}

#printableArea {
 display:block;
}

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

Я правильно включил его в HEAD, media="print" в этой таблице стилей.

Ответы

Ответ 1

Если элемент не отображается, то ни один из его дочерних элементов не будет отображаться (независимо от его свойства отображения).

* соответствует элементу <html>, поэтому весь документ скрыт.

Вам нужно быть более избирательным в отношении того, что вы скрываете.

Ответ 2

Вы выбираете правильный общий подход, но хотите использовать visibility: hidden вместо display: none, чтобы вы могли видеть дочерние элементы.

См. Печать < div id = printarea > </div> только?

Ответ 3

html body * {
 display:none;
}

#printableArea {
 display:block;
}

Кроме того, вам может понадобиться! important на #printableArea, но, вероятно, нет.

Ответ 4

Вы можете попробовать найти его поверх всего. Это разрешило 90% моих проблем, тогда мне просто пришлось создать класс .noprint и добавить его в несколько элементов для отладки.

.print_area{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 9999;

    background-color: #ffffff;
}

Ответ 5

Если вы хотите использовать JavaScript, вы можете попробовать этот простой фрагмент, который даже не требует jQuery:

document.body.innerHTML=document.getElementById('printableArea').innerHTML;

Ответ 6

Существует однострочное решение:

С JQuery

var selector = '';
$(document.head).append($('style').text('*{visibility:hidden}' + selector + '{visibility:visible}'));

Без JQuery

var selector = '';
document.head.appendChild(Object.assign(document.createElement('style'), { innerText: '*{visibility:hidden}' + selector + '{visibility:visible}' });

В обоих примерах, установите selector переменной в селекторе вы хотите. Например, div#page:hover или p.class1,p.class2

Ответ 7

сделайте div обернуть все после тега body. Перед обтеканием div поместите видимый элемент div.

Я должен был сделать это, чтобы создать простую страницу с именем пользователя и паролем, и мне нужно было спрятать все, кроме полупрозрачного фона формы входа. Таким образом, после ввода правильных учетных данных форма будет анимирована, а полупрозрачная обложка страницы будет анимирована, и, наконец, отобразится ВСЕ, кроме вас, и вы сможете нормально использовать страницу.