JS打印 - CSS文本颜色不显示

Posted 2021-05-05

我正在用html和CSS制作发票。目标是在填写后，打印发票。但由于某种原因，它不会打印文本的CSS颜色。所有文字都是黑色的。所有其他CSS样式工作，如font-family，font-size，font-weight ......

这是HTML和CSS中的原始内容：

这就是印刷品：

打印是用js：window.print();完成的

有谁知道为什么CSS颜色不起作用？

编辑：标题放在id为'factuur'的表中：

<td id="factuurTitel">Stukadoorwerken Vanhees Frank</td>

标题有这个CSS：

#factuurTitel {
    font-weight: bold;
    font-size: 30px;
    color: #194197;
    text-align: center;
    vertical-align: middle;
    font-family: 'Carrois Gothic SC', Calibri, sans-serif;
}

我有这个@media print：

@media print {
    body * {
        visibility: hidden;
    }

    #factuur, #factuur * {
        visibility: visible;
    }

    @page {
        margin: 0;
    }
}

我已经尝试将#factuurTitel { color: #194197; }添加到@media print。

答案

通常JS Print只能处理html内容，如果你想要打印样式，请在你的css文件中使用单独的媒体查询打印：

 @media print
   {
      /* your css goes here */
   }

另一答案

#factuur, #factuur * { 
  -webkit-print-color-adjust: exact;
  color-adjust: exact;
}

这适用于webkit浏览器和最新的firefox更新，否则没有其他已知的解决方案。我自己也有同样的问题。