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

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

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

Пример:

 "Good Evening"
 Print (click Here To Print)

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

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

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

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

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>
<div class="noprint">
    element that need to be hidden when printing
</div>

CSS FILE

@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>

Вы можете поместить ссылку в элемент 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.

Лучше всего создать версию страницы, предназначенную только для печати.

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

Принятый ответ от diodus не работает для некоторых, если не для всех нас. Я все еще не мог скрыть свою кнопку «Печатать эту кнопку» от выхода на бумагу.

Небольшая настройка Клинтом Пахлом вызова 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