печать страницы удаляет некоторые цвета

Question

В моем веб-приложении есть страница, которая выглядит следующим образом:

Это изображение с некоторыми точками на нем. Но когда я печатаю эту страницу с помощью функции печати цветных изображений -> сохранить как pdf, она выглядит следующим образом

Как вы можете видеть, цвет точек ушел и они просто белые. Как так? Как мне это исправить?

Answer 1

Видимо, способ исправить это (по крайней мере, chrome) использует: -webkit-print-color-Adjust: точный;

Answer 2

Эта проблема может быть решена путем настройки любого правила медиа-запроса css, которое специально предназначено для экрана, а не для принтера. Например:

@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Применяет правило только при просмотре на экране. Для применения также к принтеру:

@media all and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}