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

В вашем файле стилей добавьте следующий код:

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

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

Вот простое решение. Добавьте следующий CSS:

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

И вот ваш HTML код:

<div class="noprint">
    элемент, который нужно скрыть при печати
</div>

С помощью этого CSS-кода элемент с классом noprint не будет отображаться при печати страницы.

Этот код CSS с использованием медиа-запроса определяет стили, которые применяются при печати страницы. В частности, класс .no-print скрывает элементы с этим классом во время печати, устанавливая для них свойство visibility в hidden.

Вот как это работает:

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

Когда вы делаете печать (или используете предварительный просмотр печати), все элементы, имеющие класс no-print, будут скрыты, но по-прежнему займут место в документе. Это полезно, если вы хотите исключить определенные элементы, например, кнопки или рекламные блоки, и оставить только нужное содержимое на печатной странице.

Пример HTML:

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

<div>
  Yup
</div>

При печати этого HTML-кода, текст "Nope" из первого <div> не будет виден в распечатанной версии, в то время как текст "Yup" из второго <div> будет напечатан. Если у вас есть несколько элементов, которые необходимо скрыть при печати, просто добавьте им класс no-print, и они будут скрыты аналогичным образом.

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

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

Если у вас есть JavaScript, который влияет на свойство стиля отдельных элементов, тем самым переопределяя !important, я рекомендую обрабатывать события onbeforeprint и onafterprint. Используя эти события, вы можете вносить необходимые изменения перед печатью и восстанавливать их после. Дополнительную информацию можно найти в документации: onbeforeprint.