Question

我有一个页面，其中包含必须可打印的统计信息的图表等。我想只使用标准的浏览器打印功能来启用打印。我也有css更改所选按钮的按钮颜色，以便清楚查看哪些图表。但是，我的问题是，当我尝试打印页面时，此着色将丢失并重置为其默认显示。

我知道通过在CSS中使用webkit-print-color-adjust设置在Chrome中执行此操作的功能，但是，我的业务中绝大多数用户使用IE或Edge（因为它们是微软默认设置）和因此，我需要一个适用于它们的解决方案。

我曾尝试过使用！important和@media打印但尚未生效，除非我使用它们错误。

目前这是css：

@media print{
    .btn-primary-chart:active,
    .btn-primary-chart.active {
        color: #ffffff;
        background-color: green !important;
        border-color: #285e8e;
    }
}

非常感谢任何帮助：）

Answer 1

在Internet Explorer和Microsoft Edge中打印背景还没有任何万无一失的方法。但是，我之前尝试过一些方法，可能会在某些情况下使用：

方法1 （使用精灵）：

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fffad‌a', endColorstr='#fffada')";

方法2 ：

CSS

.background:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: -1;
    border-bottom: 1000px solid #eee;
 }

HTML

<body class="background">

但如果您想自己打印，可以启用“打印背景颜色”：

要解决此问题，请在Internet Explorer中启用“打印背景颜色和图像”选项。为此，请按照下列步骤操作：



在“工具”菜单上，单击“Internet选项”，然后单击“高级”选项卡。



在“设置”框中的“打印”下，单击以选中“打印背景颜色和图像”复选框，然后单击“确定”。

此外，还有一些类似的StackOverFlow帖子

Answer 2

请尝试在样式上添加“！important”（但不要在@media打印中添加。）

我刚刚遇到打印视图中缺少字体颜色的问题，最终的解决方案是替换

color: red !;

带

color: red !important;

的风格。

如果不使用“！important”，似乎会忽略某些样式。

Answer 3

从SO回答here，您的CSS不起作用的原因是因为浏览器打印设置中的默认设置。

使用Chrome和Safari，您可能需要添加

-webkit-print-color-adjust: exact;

强制打印背景颜色。

Answer 4

我找到了一个甚至可以在EDGE浏览器中运行的解决方案。这是基本的HTML：

genhtml -o coverage coverage.main.info coverage.main2.info

您可以根据需要调整宽度或父级和子级别。

Answer 5

值得一提的是，由于我遇到了类似的问题，EDGE会在忽略HTML背景颜色的情况下正确渲染SVG。

所以不要使用：

<div style="background-color:red; width:20px height:20px">...</div>

您可以使用以下内容：

<svg style="width:20px;height:20px">
    <rect width="100%" height="100%" style="fill:red">
</svg>

打印时CSS样式丢失了

5 个答案: