Как скрыть элемент при печати веб-страницы?

У меня есть ссылка на моей веб-странице для печати веб-страницы. Однако ссылка также видна в самой распечатке.

Есть ли javascript или HTML-код, который бы спрятал ссылку при нажатии ссылки на печать?

Пример:

 "Good Evening"
 Print (click Here To Print)

Я хочу скрыть эту метку "Печать", когда печатает текст "Добрый вечер". Метка "Печать" не должна отображаться на самой распечатке.

Ответы

Ответ 1

В вашей таблице стилей добавьте:

@media print
{    
    .no-print, .no-print *
    {
        display: none !important;
    }
}

Затем добавьте class='no-print' (или добавьте класс no-print в существующий оператор класса) в свой HTML, который вы не хотите отображать в печатной версии, например, на вашей кнопке.

Ответ 2

Лучшей практикой является использовать таблицу стилей специально для печати, а также установить ее атрибут media на print.

В нем отобразите/скройте элементы, которые вы хотите напечатать на бумаге.

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

Ответ 3

Bootstrap 3 имеет свой собственный класс для этого называется:

hidden-print

Он определяется следующим образом:

@media print {
  .hidden-print {
    display: none !important;
  }
}

Вы не должны определять это самостоятельно.

В Bootstrap 4 это изменилось на:

.d-print-none

Ответ 4

Вот простое решение, которое ставит этот CSS

<style>
@media print{
   .noprint{
       display:none;
   }
}

и вот HTML

<div class="noprint">
    element that need to be hide when printing
</div>
<div class="noprint">
    element that need to be hide when printing
</div>

Ответ 5

ФАЙЛ 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" >

ЭЛЕМЕНТ

<div class="no-print"></div>

Ответ 6

Вы можете поместить ссылку в 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 и указать вторую таблицу стилей с медиа-атрибутом.

Ответ 7

Самое лучшее, что вам нужно сделать, это создать версию страницы только для печати. ​​

Ой, подождите... это уже не 1999 год. Используйте печатный CSS с "display: none".

Ответ 8

@media print {
  .no-print {
    visibility: hidden;
  }
}
<div class="no-print">
  Nope
</div>

<div>
  Yup
</div>

Ответ 9

Принятый ответ диодом не работает для некоторых, если не для всех нас. Я не мог по-прежнему скрывать свою кнопку "Печать" от выхода на бумагу.

Небольшая настройка Clint Pachl для вызова css файла путем добавления

      media="screen, print"

и не только

      media="screen"

решает эту проблему. Поэтому для ясности и потому, что не легко увидеть, как Clint Pachl скрывает дополнительную помощь в комментариях. Пользователь должен указать ", 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">

То, что я думаю, решает эту проблему для всех.