На моей веб-странице есть ссылка для распечатки веб-страницы. Однако ссылка видна и в самой распечатке.
Существует ли javascript или HTML-код, который бы скрывал кнопку ссылки, когда я нажимаю на ссылку печати?
Пример:
"Good Evening"
Print (click Here To Print)
Я хочу скрыть эту метку "Печать", когда печатается текст "Добрый вечер". Ярлык "Печать" не должен отображаться на самой распечатке.
В вашей таблице стилей добавьте:
@media print
{
.no-print, .no-print *
{
display: none !important;
}
}
Затем добавьте class='no-print'
(или добавьте класс no-print к существующему утверждению class) в HTML, который вы не хотите видеть в печатной версии, например, кнопку.
Лучшей практикой является использование таблицы стилей специально для печати, и установка ее атрибута media
на print
.
В ней покажите/скройте элементы, которые вы хотите напечатать на бумаге.
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
Bootstrap 3 имеет его собственный класс для этого называется:
hidden-print
Это определяется так:
@media print {
.hidden-print {
display: none !important;
}
}
Вам не нужно определять это самостоятельно.
В Bootstrap 4 это изменилось на:
.d-print-none
Вот простое решение поместите этот CSS
<style>
@media print{
.noprint{
display:none;
}
}
& Лт; / style >
и вот HTML
<div class="noprint">
element that need to be hidden when printing
</div>
<div class="noprint">
element that need to be hidden when printing
</div>
CSS ФАЙЛ
@media print
{
#pager,
form,
.no-print
{
display: none !important;
height: 0;
}
.no-print, .no-print *{
display: none !important;
height: 0;
}
}
HTML HEADER
<link href="/theme/css/ui/ui.print.css?version=x.x.x" media="print" rel="stylesheet" type="text/css" >
ELEMENT
<div class="no-print"></div>
Вы можете поместить ссылку в div, а затем использовать JavaScript в теге якоря, чтобы скрыть div при нажатии. Пример (не проверен, может потребоваться доработка, но вы поняли идею):
<div id="printOption">
<a href="javascript:void();"
onclick="document.getElementById('printOption').style.visibility = 'hidden';
document.print();
return true;">
Print
</a>
</div>
Недостатком является то, что после нажатия кнопка исчезает, и они теряют эту возможность на странице (хотя всегда есть Ctrl+P).
Лучшим решением будет создать таблицу стилей печати и в этой таблице стилей указать скрытый статус идентификатора printOption
(или как вы его назовете). Вы можете сделать это в разделе head HTML и указать вторую таблицу стилей с атрибутом media.
Лучшее, что можно сделать, - это создать версию страницы только для печати.
Ой, подожди... это больше не 1999 год. Используйте CSS для печати с «отображение: нет».
& Лт;!- начать фрагмент: js hide: ложная консоль: истинная павиана: false - >
@media print {
.no-print {
visibility: hidden;
}
}
<div class="no-print">
Nope
</div>
<div>
Yup
</div>
& Лт;!- конец фрагмента - >
Принятый ответ от диода не работает для некоторых, если не для всех нас. Я все еще не мог скрыть свою кнопку «Печать» от выхода на бумагу.
Небольшая корректировка Клинтом Пахлом вызова файла CSS путем добавления
media="screen, print"
и не просто
media="screen"
решает эту проблему. Так что для ясности и потому, что не легко увидеть Клинта Пахла скрытой дополнительной помощью в комментариях. Пользователь должен включить «, print» в файл css с желаемым формированием.
<link rel="stylesheet" href="my_cssfile.css" media="screen, print"type="text/css">
и не только по умолчанию media = "экран".
<link rel="stylesheet" href="my_cssfile.css" media="screen" type="text/css">
Это, я думаю, решает эту проблему для всех.
Если у вас есть Javascript, который мешает стилю свойства отдельных элементов, таким образом переопределяя `!важно, я предлагаю обрабатывать события "onbeforeprint" и "onafterprint". https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint