Поддерживайте встроенный CSS при печати

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

У меня есть таблица, в которой есть ячейки, отформатированные с определенным цветовым фоном, в зависимости от значения числа в ячейке. Это делается с помощью javascript, который выполняется, когда таблица завершила загрузку значений (используя datatables.js).

Как это:

function colorIndex(data) { 
$(".index_num").each(function() { 
    var x = $(this).text(); 
    if (x <= 25) { 
     $(this).css("color", "white") 
     $(this).css("background-color", "#1d5792") 
    } else if ((x > 25) && (x <= 50)) { 
     $(this).css("color", "white") 
     $(this).css("background-color", "#2e7fb5") 
    } else if ((x > 50) && (x <= 80)) { 
     $(this).css("color", "black") 
     $(this).css("background-color", "#6db5d8") 
    } else if ((x > 80) && (x <= 115)) { 
     $(this).css("color", "black") 
     $(this).css("background-color", "#cacaca") 
    } else if ((x > 115) && (x <= 140)) { 
     $(this).css("color", "black") 
     $(this).css("background-color", "#fd9245") 
    } else if ((x > 140) && (x <= 165)) { 
     $(this).css("color", "white") 
     $(this).css("background-color", "#e5560a") 
    } else if (x > 165) { 
     $(this).css("color", "white") 
     $(this).css("background-color", "#7b3014") 
    } else if (x == null) { 
     $(this).css("color", "white") 
     $(this).css("background-color", "#7b3014") 
    } 
}); 
}

Это прекрасно работает, стили все добавлены встроенные и все довольны. Однако, когда я перехожу к печати, стили игнорируются и все окна печатаются без цвета фона. Как я могу изменить свой код, чтобы обеспечить печать с правильным цветом фона?

Спасибо.

источник

2015-04-17 jonmrich

У вас есть печать для печати? – abaracedo

Да ... все другое форматирование, которое я делаю (например, макет и скрывающие элементы), отлично работает. Я предполагаю, что вопрос заключается в том, чтобы встроенный CSS фактически использовал запрос на печать. – jonmrich

Делает ли ['-webkit-print-color-adjust: exact'] (https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-print-color-adjust) подходящий для ваших нужд? Он должен заставлять цвета на элементе с этим свойством появляться в отпечатках. Поместите его на 'body', чтобы заставить все цвета печатать. – Scott

Одна мысль ... вместо того, чтобы присваивать свойствам встроенного стиля элементам с JS, вам может понадобиться по-другому это сделать. Вы можете попробовать применить цвет фона в виде класса (определенного в таблице стилей печати) или даже добавить новые элементы стиля в голову.

источник

2015-04-17 19:02:12 Mike

Это может быть интересное обходное решение, если я не могу найти что-то более прямое, используя то, что у меня есть сейчас. – jonmrich

Печать цветов фона должна быть turned on в настройках печати браузера. В противном случае никакое количество фонового стиля не будет иметь никакого значения.

Использование нестандартного свойства -webkit-print-color-adjust: exact; может работать в браузерах WebKit, таких как Chrome и Safari, но не будет в другом месте. (Там есть proposal for standardization, но его пока нет.)

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

источник

2015-04-17 19:07:33

Отличная точка! – Mike

Спасибо. Это имеет смысл и может быть еще одним обходным решением. Я не знал о цвете фона в печати в браузере. Понимает, почему он будет там. Как насчет других встроенных стилей, таких как мои цвета шрифта? – jonmrich

Кажется, что некоторые браузеры предотвращают печать белого текста, когда не печатают цвета фона, так как он, вероятно, не появится. Как вы решили решать проблемы с цветами фона? –

Поддерживайте встроенный CSS при печати

ответ

Смежные вопросы