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

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

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

Пример:

 "Good Evening"
 Print (click Here To Print)

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

TRiG
Редактировал вопрос 14-го октября 2015 в 11:14
Программирование
printing css
10-го декабря 2008 в 7:11
50 просмотров

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

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

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

The Guy with The Hat
Редактировал ответ 4-го декабря 2018 в 3:22
Комментарии (8)

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

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

rudolph1024
Редактировал ответ 17-го июля 2015 в 8:55
Комментарии (2)

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

hidden-print

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

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

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

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

.d-print-none
Bijan
Редактировал ответ 2-го апреля 2019 в 8:51
Комментарии (2)

Вот простое решение поместите этот CSS


@media print{
   .noprint{
       display:none;
   }
}

& Лт; / style >

и вот 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>
Tac Tacelosky
Редактировал ответ 20-го февраля 2019 в 12:19
Комментарии (2)

CSS ФАЙЛ

@media print
{
    #pager,
    form,
    .no-print
    {
        display: none !important;
        height: 0;
    }

    .no-print, .no-print *{
        display: none !important;
        height: 0;
    }
}

HTML HEADER

ELEMENT

<div class="no-print"></div>
Комментарии (0)

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

Lucky
Редактировал ответ 14-го марта 2017 в 1:23
Комментарии (0)

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

Ой, подожди... это больше не 1999 год. Используйте CSS для печати с «отображение: нет».

Комментарии (3)

& Лт;!- начать фрагмент: js hide: ложная консоль: истинная павиана: false - >

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

<div>
  Yup
</div>

& Лт;!- конец фрагмента - >

Комментарии (0)

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

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

      media="screen, print"

и не просто

      media="screen"

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

и не только по умолчанию media = "экран".

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

Комментарии (0)

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

Комментарии (0)