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

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

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

hidden-print

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

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

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

---

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

.d-print-none

Answer 3

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

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

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

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

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

ЭЛЕМЕНТ

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

Answer 7

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

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

<div>
  Yup
</div>

Answer 8

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

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

Answer 9

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

Answer 10

Принятый ответ от 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">

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

Answer 11

Как сказал Элиас Хасле, JavaScript может переопределить !important. Итак, я расширил его ответ теоретической реализацией.

Этот код идентифицирует все элементы с классом no-print, скрывает их с помощью CSS перед печатью и восстанавливает исходный стиль после печати:

      var noPrintElements = [];

window.addEventListener("beforeprint", function(event) {
   var hideMe = document.getElementsByClassName("no-print");
   noPrintElements = [];
   Array.prototype.forEach.call(hideMe, function(item, index) {
      noPrintElements.push({"element": item, "display": item.style.display });
      item.style.display = 'none'; // hide the element
   });   
});

window.addEventListener("afterprint", function(event) {
   Array.prototype.forEach.call(noPrintElements, function(item, index) {
      item.element.style.display = item.display; // restore the element
   });      
   noPrintElements = []; // just to be on the safe side
});