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

Question

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

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

Пример:

 "Good Evening"
 Print (click Here To Print)

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

Answer 1

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

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

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

Answer 2

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

.

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

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

Answer 3

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

hidden-print

Это определяется так:

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

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

---

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

.d-print-none

Answer 4

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

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

Answer 5

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

ELEMENT

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

Answer 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 и указать вторую таблицу стилей с атрибутом media.

Answer 7

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

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

Answer 8

@media print {
  .no-print {
    visibility: hidden;
  }
}

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

<div>
  Yup
</div>

Answer 9

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

Небольшая корректировка Клинтом Пахлом вызова файла CSS путем добавления

      media="screen, print" 

а не только

      media="screen"

решает эту проблему. Так что для наглядности и потому, что Клинту Пахлю ​​непросто увидеть скрытую дополнительную помощь в комментариях. Пользователь должен включить «, print» в css файл с желаемым форматированием.

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

и не по умолчанию media = "screen" only.

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

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

Answer 10

Если у вас есть Javascript, который вмешивается в свойство стиля отдельных элементов, переопределяя таким образом !important, я предлагаю обработать события onbeforeprint и onafterprint. https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint