Question

我使用print.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")
    }
});
}

这很好用，样式都是内联添加的，每个人都很开心。但是，当我去打印时，会忽略样式，并且所有打印的框都没有背景颜色。如何更改代码以确保使用正确的背景颜色进行打印？

感谢。

Answer 1

有一种想法......您可能需要以另一种方式进行操作，而不是使用JS为元素分配内联样式属性。您可以尝试以类的形式（在打印样式表中定义）应用背景颜色，或者甚至将新样式元素添加到头部。

Answer 2

在浏览器的打印设置中打印背景颜色必须为turned on。否则，任何背景样式都不会产生任何影响。

使用非标准-webkit-print-color-adjust: exact;属性可能适用于Chrome和Safari等WebKit浏览器，但在其他地方无法使用。（那里有一个proposal for standardization，但它还没有。）

如果打印背景颜色非常重要，并且您无法控制用户浏览器的设置，您可能能够将所有颜色图像拉伸以填充单元格

打印时保持内联CSS

2 个答案: