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

440

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

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

Пример:

 "Good Evening"
 Print (click Here To Print)

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

сурав
источник

Ответы:

743

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

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

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

Diodeus - Джеймс Макфарлейн
источник
17
Этот ответ не полный. Вы должны иметь два раздела СМИ. @mediaпечать и @mediaэкран. В разделе печати вы размещаете свои стили для печати. В разделе экрана экрана вы размещаете свои стили для трафаретной печати. Вы даже можете иметь несколько разделов экрана для разных разрешений. В основном, если вы просто добавите то, что указано в этом ответе, это не сработает. Поверьте мне, я пытался. Так как же это получило 69 голосов?
Codeguy007
6
на самом деле, это работает, если вы просто используете код, который дает. Я только что попробовал в Firefox. так что, по крайней мере, в современных браузерах это решение.
luschn
8
Я попытался скрыть <div> с несколькими вложенными элементами. Проблема заключалась в том, что некоторые элементы все еще были видны при печати. Решением было использовать этот css:@media print { .no-print, .no-print * { display: none !important; } }
Филипп
6
Это может или не может работать в зависимости от указанного носителя. Например, чтобы объединить стили экрана и печати в одной таблице стилей, а затем использовать медиазапросы в этой таблице стилей, как следует из этого ответа, необходимо указать оба типа медиа: «экран» и «печать»:<link rel="stylesheet" href="all.css" media="screen, print" type="text/css">
Клинт Пахл
5
@ Codeguy007: я не понимаю вашу точку зрения. Он нужен только в том @media screenслучае, если вы хотите определить стили только для экрана, но здесь это не так: по умолчанию отображаются все элементы, а определения стиля только для печати, который скрывает элемент, вполне достаточно, чтобы он по-прежнему отображался на экране. ,
chiccodoro
173

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

hidden-print

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

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

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


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

.d-print-none
Биджан
источник
Отличное решение Bootstrap 4. Работает как шарм.
Диего Виктор де Хесус
Я не могу поверить, как я пропустил загрузочное решение до сих пор .. Спасибо!
ReturnTable
! importantспас меня
Эван Ху
169

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

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

<link rel="stylesheet" type="text/css" href="print.css" media="print" />
Andreas Grech
источник
9
Здесь вы также должны иметь css, чтобы не отображать другое содержимое оболочки, изменить семейство шрифтов на лучшее значение, удалить ширину, чтобы обеспечить полное использование страницы. Если вы установите для своей основной таблицы стилей значение media = "screen", вы можете рассматривать свою таблицу стилей печати как новое игровое поле.
Стив Перкс
2
Абсолютно. И при таком подходе вы можете просто удалить «Нажмите здесь, чтобы открыть версию для печати» или добавить «Эта страница предназначена для печати» или подобное. Хорошая практика, как сказал Стив Перкс, - удалять весь ненужный контент, такой как навигация, реклама и тому подобное. Включите только основное содержание страницы.
Арве Систад
39

Вот простое решение поставить этот 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>
Nesar Nori
источник
3
Класс был бы лучшим выбором, чем идентификатор здесь, по той простой причине, что если вы используете идентификатор, то вы можете применять это правило только к одной вещи на странице. Класс позволит вам применять его везде, где это необходимо.
Ник Ф
12

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>
user3806549
источник
10

Вы можете поместить ссылку в элемент 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.

Джастин Скотт
источник
6

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

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

Джей Р
источник
1
в версиях для печати все еще есть некоторая ценность, потому что она ясно показывает пользователю, что они получат, когда будут печатать, что можно использовать с помощью техник CSS
annakata
1
Кроме того, вы можете включить в печатную версию дополнительный контент, такой как ссылки, нижние колонтитулы и т. д. Однако в ближайшие дни многое из этого будет достигнуто через css.
Стив Перкс
8
@annakata: пользователь уже может получить это, используя «Предварительный просмотр» в своем браузере. В качестве бонуса, это на самом деле то, для чего это.
рекурсивный
3

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

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

полотна
источник