Як приховати елемент під час друку веб-сторінки?

Я маю на своїй веб-сторінці посилання для друку веб-сторінки. Однак посилання також видно в самій роздруківці.

Чи існує JavaScript або HTML-код, який ховав би кнопку посилання, коли я натискаю посилання для друку?

Приклад:

 "Good Evening"
 Print (click Here To Print)

Я хочу приховати цю мітку "Друк", коли вона надрукує текст "Доброго вечора". Мітка "Друк" не повинна відображатися на самому роздрукуванні.

До таблиці стилів додайте:

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

Потім додайте class='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 і вказати другу таблицю стилів з медіа-атрибутом.

Найкраще зробити це - створити "лише для друку" версію сторінки.

О, чекай ... це вже не 1999 рік. Використовуйте CSS для друку з "display: none".

Прийнята діодом відповідь не працює для деяких, якщо не для всіх нас. Я не могла приховати свою кнопку "Друк цієї кнопки" від виходу на папір.

Невелике коригування Клінт Пачл виклику CSS-файлу, додавши його

      media="screen, print" 

і не просто

      media="screen"

вирішує цю проблему. Тому для ясності та тому, що нелегко побачити Клінта Пахла приховану додаткову допомогу в коментарях. Користувач повинен включити ", print" у файл css з потрібним форматуванням.

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

а не лише за замовчуванням медіа = "екран".

    <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