gpt4 book ai didi

html - 我无法让任何元素在打印预览中显示颜色

转载 作者:搜寻专家 更新时间:2023-10-30 21:59:34 24 4
gpt4 key购买 nike

我正在使用 angular 4,需要用户能够打印一段数据。我可以使用 bootstrap 获得打印预览,但是当我显示预览时,没有显示任何颜色。我在 chrome 和 safari 中得到了同样的结果,即使在 safari 中选中了背景颜色,颜色仍然没有显示。

Screenshot

屏幕截图的左侧是应该显示的颜色,右侧是打印预览显示的颜色。

我还发现,当我右键单击并选择打印时,同样的事情也会发生在常规应用程序本身。其他网站在打印预览中显示颜色完全正常。

Screenshot

这是我的打印函数(现在几乎是从另一个堆栈溢出问题中提取出来的,我计划稍后更改它。)

print(): void {
let printContents, popupWin;
printContents = document.getElementById('print-section').innerHTML;
popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
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 {{showOnly}}s</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>

我已经尝试了很多关于堆栈溢出的解决方案,但我没有找到任何解决方案,所以此时我有点不知所措。

最佳答案

好吧,我明白了。 Bootstrap 导致颜色不显示。它还导致我的全局 css 文件无法工作。使用 bootstrap 4 而不是 3 似乎解决了第二个问题,但是打印问题仍然存在。所以我不会对需要打印的文件使用 Bootstrap 。

关于html - 我无法让任何元素在打印预览中显示颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46752646/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com