我无法让任何元素在打印预览中显示颜色
Posted
技术标签:
【中文标题】我无法让任何元素在打印预览中显示颜色【英文标题】：I can't get any elements to display color in print preview 【发布时间】：2018-03-26 22:21:42 【问题描述】：我正在使用 angular 4 并且需要用户能够打印一段数据。我可以通过引导程序正常工作来获得打印预览，但是，当我显示预览时，没有任何颜色显示。我在 chrome 和 safari 中得到了相同的结果，即使在 safari 中检查了背景颜色，颜色仍然不显示。
截图左边是应该显示的颜色，右边是打印预览显示的颜色。
我还发现，当我右键单击并选择打印时，常规应用程序本身也会发生同样的事情。其他网站在打印预览中的颜色显示完全正常。
这是我的打印功能（现在几乎是从另一个堆栈溢出问题中提取的，我计划稍后更改。）
print(): void
let printContents, popupWin;
printContents = document.getElementById('print-section').innerhtml;
popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,');
popupWin.document.open();
popupWin.document.write(`
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Print tab</title>
<style>
.lightBlue
background-color: lightblue !important;
@media print
.lightBlue
background-color: lightblue !important;
-webkit-print-color-adjust: exact;
</style>
</head>
<body onload="window.print();window.close()">$printContents</body>
</html>`
);
popupWin.document.close();
这是正在打印窗口中显示的 HTML：
<div id="print-section" [hidden]="printable">
<div class="container">
<h1>Location Report for showOnlys</h1>
<br/>
<table class="table table-bordered">
<thead class="lightBlue">
<tr>
<th >Dog</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
</div>
</div>
我已经尝试了很多关于堆栈溢出的解决方案，但我没有一个可以工作，所以我现在有点不知所措。
【问题讨论】：
您确定这不仅仅是浏览器设置打印背景颜色的问题吗？ “常规应用程序本身”的屏幕截图确实有颜色，只是没有背景颜色。 没错，我在 Safari 中得到了相同的结果，即使选中了背景颜色框。可打印中的那个条实际上是我唯一需要有颜色的东西，其他一切都是黑白的。如果我能以某种方式欺骗该元素使其具有颜色，那对我有用。 有什么方法可以在打印文档之前将.scss 文件放入图片中？
this could be the issue，尝试在浏览器中启用print background选项。
div background color in print page doesn't work的可能重复
【参考方案1】：
好吧，我想通了。 Bootstrap 导致颜色不显示。这也导致我的全局 css 文件无法工作。使用 bootstrap 4 而不是 3 似乎已经解决了第二个问题，但是打印问题仍然存在。所以我不会对需要打印的文件使用引导程序。
【讨论】：
以上是关于我无法让任何元素在打印预览中显示颜色的主要内容，如果未能解决你的问题，请参考以下文章