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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS打印 - CSS文本颜色不显示相关的知识,希望对你有一定的参考价值。

我正在用html和CSS制作发票。目标是在填写后,打印发票。但由于某种原因,它不会打印文本的CSS颜色。所有文字都是黑色的。所有其他CSS样式工作,如font-familyfont-sizefont-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更新,否则没有其他已知的解决方案。我自己也有同样的问题。

以上是关于JS打印 - CSS文本颜色不显示的主要内容,如果未能解决你的问题,请参考以下文章

用JS文件如何设置奇数表格行背景和偶数表格行背景

Html/Css/Js:在 <i> 标签之前显示文本

文本颜色计算以获得最大的可读性 PHP/JS/CSS

CSS和JS实现文本溢出显示省略号

文本框中的透明文本(css、js、jquery)

代码片段如何使用CSS来快速定义多彩光标