CSS / HTML / Javascript приемы для печати веб-страницы без изображений

Question

Я пытаюсь разместить на веб-странице кнопку печати, которая будет печатать содержимое страницы, кроме изображений.Есть идеи?

Answer 1

Вы можете использовать CSS для отключения всех изображений на вашем сайте только при печати. ​​

@media print {
  img {
    display: none !important;
  }

  * {
    background-image: none !important;
  }
}

Answer 2

Вам нужна таблица стилей печати. Для этого есть два варианта:

1. Ссылка на отдельную таблицу стилей с помощью следующего кода: <link rel="stylesheet" type="text/css" href="printstylesheet.css" media="print"/>

   В эту таблицу стилей поместите следующее:

   img {
       display: none;
   }
   

2. Добавьте в основную таблицу стилей следующее:

   @media print {
       img {
         display: none;
   }
   

Answer 3

Нет необходимости использовать кнопку, если вы не хотите, чтобы люди могли печатать изображения или не использовать изображения.

Если вы просто хотите, чтобы люди печатали без изображений (что предпочитается в большинстве случаев),Вы можете просто использовать таблицу стилей печати. ​​

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

Затем добавьте

img {display: none;}

Answer 4

Вы можете использовать таблицу стилей для печатных СМИ и создать правило, как показано ниже.

img { visibility:hidden; }

...

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

Вы также можете использовать display:none в качестве правила изображения, но это не сохранит интервал и может полностью изменить макет печатной страницы.