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

голоса
332

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

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

Пример:

 Good Evening
 Print (click Here To Print)

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

Задан 10/12/2008 в 08:11
источник пользователем
На других языках...                            


10 ответов

голоса
587

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

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

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

Ответил 10/12/2008 в 15:02
источник пользователем

голоса
153

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

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

<link rel="stylesheet" type="text/css" href="print.css" media="print" />
Ответил 10/12/2008 в 08:23
источник пользователем

голоса
107

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

hidden-print

Она определяется следующим образом:

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

Вы не должны определить его по своему усмотрению.


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

.d-print-none
Ответил 01/04/2016 в 09:08
источник пользователем

голоса
10

Вот простое решение поставить этот 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>
Ответил 23/06/2017 в 15:00
источник пользователем

голоса
10

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>
Ответил 17/12/2015 в 09:05
источник пользователем

голоса
5

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

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

Ответил 10/12/2008 в 22:42
источник пользователем

голоса
5

Вы можете разместить ссылку в 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, хотя).

Лучшим решением было бы создать таблицу стилей для печати и в этой таблице стилей указать скрытый статус printOptionID (или что вы его называете). Вы можете сделать это в головной части HTML и указать вторую таблицу стилей с атрибутом медиа.

Ответил 10/12/2008 в 08:20
источник пользователем

голоса
3

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

<div>
  Yup
</div>

Ответил 26/10/2017 в 23:38
источник пользователем

голоса
1

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

Ответил 29/11/2018 в 09:19
источник пользователем

голоса
1

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

Немного регулировка Клинта Pachl вызывающего файла CSS, добавив на

      media="screen, print" 

и не только

      media="screen"

решает эту проблему. Так что для ясности и потому, что это не так легко увидеть Clint Pachl скрытой дополнительной помощи в комментариях. Пользователь должен включать в себя «печать» в 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">

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

Ответил 28/01/2018 в 06:45
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more