У меня есть ссылка на моей веб-странице, чтобы распечатать веб-страницу. Однако ссылка также видна в самой распечатке.
Есть ли код javascript или HTML, который скрывает кнопку ссылки, когда я нажимаю ссылку для печати?
Пример:
"Good Evening"
Print (click Here To Print)
Я хочу скрыть эту этикетку «Печать», когда она печатает текст «Добрый вечер». Ярлык «Печать» не должен отображаться на самой распечатке.
В вашей таблице стилей добавьте:
@media print
{
.no-print, .no-print *
{
display: none !important;
}
}
Затем добавьте class='no-print' (или добавьте класс без печати к существующему оператору класса) в свой HTML-код, который вы не хотите отображать в печатной версии, например, вашу кнопку.
@media печать и @media экран. В разделе печати вы размещаете свои стили для печати. В разделе экрана экрана вы размещаете свои стили для трафаретной печати. У вас даже может быть несколько разделов экрана для разных разрешений. В принципе, если вы просто добавите то, что указано в этом ответе, это не сработает. Поверьте, я пробовал. Так как же он получил 69 голосов?
- person Codeguy007; 17.11.2012
@media print { .no-print, .no-print * { display: none !important; } }
- person Philipp; 09.04.2013
<link rel="stylesheet" href="all.css" media="screen, print" type="text/css">
- person Clint Pachl; 28.05.2013
@media screen только в том случае, если вы хотите определить стили только для экрана, но здесь дело обстоит не так: по умолчанию отображаются все элементы, и определения стиля только для печати, который скрывает элемент, вполне достаточно, чтобы он по-прежнему отображался на экран.
- person chiccodoro; 30.08.2013
Bootstrap 3 имеет свой собственный класс для этого звонил:
hidden-print
Это определяется так:
@media print {
.hidden-print {
display: none !important;
}
}
Необязательно определять его самостоятельно.
В Bootstrap 4 это изменилось на:
.d-print-none
Лучше всего использовать таблицу стилей специально для печати и установить для ее атрибута media значение print.
В нем покажите / скройте элементы, которые вы хотите распечатать на бумаге.
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
Вот простое решение: поместите этот CSS
@media print{
.noprint{
display:none;
}
}
а вот HTML
<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
<link href="/theme/css/ui/ui.print.css?version=x.x.x" media="print" rel="stylesheet" type="text/css" >
ЭЛЕМЕНТ
<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 ID (или как вы его называете). Вы можете сделать это в разделе заголовка HTML и указать вторую таблицу стилей с атрибутом мультимедиа.
Лучше всего создать версию страницы «только для печати».
Ой, подожди ... это уже не 1999 год. Используйте CSS для печати с «display: none».
Принятый ответ Диода не работает для некоторых, если не всех из нас. Я все еще не мог скрыть свою кнопку «Напечатать эту», чтобы она не попала на бумагу.
Небольшая корректировка Клинтом Пахлом вызова файла css путем добавления
media="screen, print"
и не только
media="screen"
решает эту проблему. Так что для ясности и потому, что нелегко увидеть, как Клинт Пахл скрыл дополнительную помощь в комментариях. Пользователь должен включить ", print" в файл css с желаемым форматированием.
<link rel="stylesheet" href="my_cssfile.css" media="screen, print"type="text/css">
а не только media = "screen" по умолчанию.
<link rel="stylesheet" href="my_cssfile.css" media="screen" type="text/css">
Думаю, это решает эту проблему для всех.
Если у вас есть Javascript, который влияет на свойство стиля отдельных элементов, таким образом переопределяя !important, я предлагаю обработать события onbeforeprint и onafterprint. https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint
