Блог

Главная - Вопросы по программированию - Прозрачный стиль для таблицы при печати

Прозрачный стиль для таблицы при печати

#javascript #html #css #printing #leaflet

Вопрос:

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

Есть ли способ получить доступ к коду или css странице предварительного просмотра, в отличие от моего фактического кода? Или есть еще одно исправление, которого мне не хватает?

Если это поможет, я использую leaflet и плагин для печати, все выглядит правильно, за исключением таблицы. Спасибо, что нашли время прочитать или ответить на это, я прикрепил фотографию таблицы в предварительном просмотре.

Скриншот моей таблицы, в которой отсутствует стиль в предварительном просмотре.

Скриншот моей таблицы, в которой отсутствует стиль в предварительном просмотре.

Комментарии:

1. Вероятно, вам придется указать таблицу стилей печати. jotform.com/blog/css-perfect-print-stylesheet-98272

2. … или параметры печати браузера-это фильтрация изображений и выделение границ.

3. У меня есть отдельный файл print.css, и я также прошел настройки браузера, чтобы разрешить фон, цвет и т. Д.

Ответ №1:

Вы можете использовать

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

для оформления предварительного просмотра печати.
Я понимаю. печать css и основной css-это разница.
Поэтому вы стилизуете его другими способами.

например:

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


body {
  margin: 2em;
  color: #fff;
  background-color: #000;
}

/* override styles when printing */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
    opacity:0.3;
  }

}

Ответ №2:

Добавьте отсутствующие классы начальной загрузки в свой css-файл с помощью @media print. Пример:

 @media print {
    .table td {
        background-color: #fff;
    }
}

Подробнее о печати в СМИ:
https://developer.mozilla.org/en-US/docs/Web/CSS/@media

Метки: