Как скрыть элемент при печати веб-страницы?
У меня есть ссылка на моей веб-странице, чтобы распечатать веб-страницу. Однако ссылка также видна в самой распечатке.
Есть ли код javascript или HTML, который скрывает кнопку ссылки, когда я нажимаю ссылку для печати?
Пример:
"Good Evening"
Print (click Here To Print)
Я хочу скрыть эту этикетку «Печать», когда она печатает текст «Добрый вечер». Ярлык «Печать» не должен отображаться на самой распечатке.
Ответы 10
Вы можете поместить ссылку в 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 (или как вы его называете). Вы можете сделать это в разделе заголовка HTML и указать вторую таблицу стилей с атрибутом мультимедиа.
Лучше всего использовать использовать таблицу стилей специально для печати и установить для его атрибута media значение print.
В нем покажите / скройте элементы, которые вы хотите распечатать на бумаге.
<link rel = "stylesheet" type = "text/css" href = "print.css" media = "print" />
Абсолютно. При таком подходе вы можете либо просто удалить «Щелкните здесь, чтобы получить версию для печати», либо добавить «Эта страница предназначена для печати» или что-то подобное. Как сказал Стив Перкс, хорошей практикой является удаление всего ненужного контента, такого как навигация, реклама и тому подобное. Включите только основное содержание страницы.
В вашей таблице стилей добавьте:
@media print
{
.no-print, .no-print *
{
display: none !important;
}
}
Затем добавьте class='no-print' (или добавьте класс без печати к существующему оператору класса) в свой HTML-код, который вы не хотите отображать в печатной версии, например, вашу кнопку.
media = "print" по какой-то причине не работало на определенном сайте, но этот трюк сработал. Престижность!
Это неполный ответ. У вас должно быть два медиа-раздела. Печать @media и экран @media. В разделе печати вы размещаете свои стили для печати. В разделе экрана экрана вы размещаете свои стили для трафаретной печати. У вас даже может быть несколько разделов экрана для разных разрешений. В принципе, если вы просто добавите то, что указано в этом ответе, это не сработает. Поверьте, я пробовал. Так как же он получил 69 голосов?
на самом деле, это действительно работает, если вы просто используете код, который дает. я только что пробовал в firefox. так что, по крайней мере, в современных браузерах это решение.
Я пытался скрыть <div> с несколькими подэлементами внутри. Проблема заключалась в том, что некоторые элементы все еще были видны на печати. Решение заключалось в использовании этого css: @media print { .no-print, .no-print * { display: none !important; } }
Это может работать или не работать в зависимости от указанного носителя. Например, чтобы объединить стили экрана и печати в одной таблице стилей, а затем использовать медиа-запросы в этой таблице стилей, как предполагает этот ответ, вы должны указать оба типа медиа: screen и print: <link rel = "stylesheet" href = "all.css" media = "screen, print" type = "text/css">
@ Codeguy007: Я не понимаю твою точку зрения. @media screen нужен только в том случае, если вы хотите определить стили только для экрана, но здесь дело обстоит не так: по умолчанию отображаются все элементы, и путем определения стиля только для печати, который скрывает элемент, вполне достаточно, чтобы он по-прежнему отображался на экране. экран.
@Chiccodoro У нас были проблемы с некоторыми браузерами, когда мы этого не делали. Возможно, в спецификации сказано, что вам не нужно определять «@media screen», но как только мы добавили «@media print», страница перестала работать должным образом в некоторых браузерах.
Лучше всего создать версию страницы «только для печати».
Ой, подожди ... это уже не 1999 год. Используйте CSS для печати с «display: none».
в версиях для печати все еще есть некоторая ценность, потому что она ясно показывает пользователю, что они получат, когда напечатают, что может быть использовано с помощью методов CSS.
Кроме того, вы можете включать в печатную версию дополнительный контент, например ссылки на ссылки, нижние колонтитулы и т. д. Однако в ближайшие дни многое из этого будет достигнуто и с помощью CSS.
@annakata: пользователь уже может получить это, используя «Предварительный просмотр» в своем браузере. В качестве бонуса это действительно то, для чего он нужен.
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>
Bootstrap 3 имеет вызов свой класс своя для этого:
hidden-print
Это определяется так:
@media print {
.hidden-print {
display: none !important;
}
}
Вам не нужно определять это самостоятельно.
В Бутстрап 4 это изменилось на:
.d-print-none
Отличное решение Bootstrap 4. Работает как шарм.
Не могу поверить, как я до сих пор пропустил решение начальной загрузки .. Спасибо!
! important спас меня.
Вот простое решение поместите этот CSS
@media print{
.noprint{
display:none;
}
}
а вот HTML
<div class = "noprint">
element that need to be hidden when printing
</div>
Класс был бы здесь лучшим выбором, чем id, по той простой причине, что если вы используете id, вы можете применить это правило только к одной вещи на странице. Класс позволит вам применять его везде, где это необходимо.
И я считаю, что вы можете изменить display: none на visibility: hidden, если вы хотите, чтобы элементы занимали то же место, а просто не отображались.
Итак, простое и работоспособное решение. Раньше я думал, что мы не можем повлиять на печатную версию страницы.
@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 = "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
Здесь у вас также должен быть css, чтобы не отображать другое содержимое оболочки, изменить семейство шрифтов на лучшее значение, удалить ширину, чтобы обеспечить полное использование страницы. Если вы установите для своей основной таблицы стилей значение media = "screen", вы можете рассматривать свою таблицу стилей печати как новую площадку для игры.