我需要打印一些带CSS背景的页面,但它们不会出现在Safari或Chrome中,在FF中有一个页面设置选项,但我无法在这两个浏览器中找到它.他们不支持吗?
在此先感谢所有人.
我正在维护一个使用GWT创建的Web应用程序,该应用程序历来被开发为仅适用于Google Chrome.
有几个"报告"可以从系统中提取.实现方式如下:首先,创建报告的html并显示在屏幕的一部分中(这可以正常工作).之后,有一个允许打印报告的按钮.此操作生成带有信息的html(在html表中)与创建屏幕报告的方式相同,并使用它创建一个html文件,然后将其发送到打印.
这就是怪物表现出来的地方!(tum-dum-dummmm - 戏剧音乐).
由于Google Chrome已更新至版本59.0.3071.86,因此在打印时,表格/单元格会丢失边框和背景颜色.
我想也许它与生成的html有关,但事实上如果我在打印时强制html
<!DOCTYPE html>
<html>
<head>
<style>table, th, td {border: 1px solid black !important;}</style>
<title>title</title>
</head>
<body>
<h2>Add a border to a table:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
该表仍然无法正确打印(这也可以在Chrome的打印预览中看到(是的,即使选择了打印背景图像)).如果我将表格放在桌子的标签上,也会发生同样的事情.就像是:
<table style="border: 1px solid black !important;">
Run Code Online (Sandbox Code Playgroud)
我没有想法,所以我问是否有人遇到类似问题,或者对我能尝试什么有任何想法.
提前致谢.
并编辑说这与"可能的重复"中的问题不同.我过去有"背景颜色"问题,我已修复它.在这种情况下(并且如代码片段所示),似乎没有解释某些样式,例如表格边框.一切都在chrome 59.0.3071.86之前有效,所以它似乎是一个新问题,而不是"在5年内解决的问题".
而另一个编辑进一步解释:
在我的webapp中的某个地方,有一个小按钮,上面写着"打印报告".这会生成一个html文件,然后发送到打印.我将生成的html替换为一个相当简单的html来说明我的问题.所以,每当我按"打印报告"时,我"强迫"这是生成的html:
<!DOCTYPE html>
<html>
<head>
<style>table, th, td {border: 1px solid black !important;} body { -webkit-print-color-adjust: exact; } </style>
<title>title</title>
</head>
<body> …Run Code Online (Sandbox Code Playgroud) 我试图学习如何在chrome中启用打印背景颜色页面:
主页是:

所以如果我点击print(ctrl+P)并标记"背景颜色和图像" - 它确实显示了未来要打印的背景颜色:

一切都好.
但是如果我导航到另一个页面http://docs.angularjs.org/tutorial/step_02,其中也有背景颜色:

当我尝试打印它时 - 我在预览窗格中看到它没有颜色:

我的问题是:他们是怎么做到的?(或者更好,我怎样才能打印背景颜色?)
我已经在这里读到了我应该使用的内容-webkit-print-color-adjust:exact;
所以我通过chrome开发人员工具栏将它添加到html中,但它没有帮助.(当我ctrl+p再次点击时

我应该在css中更改什么才能打印背景颜色?
相关信息,搜索@media ,发现它:

但我没有在那里找到任何相关的信息.
我有一个HTML"报告"页面,其中包含一个HTML视图,如下所示:

当你打印预览时,它看起来不太好:)

我知道用于打印的CSS,但我不明白的是我的HTML是如何被解释的 - 例如为什么我的蓝色边框很好,但我的彩色框(实际上只是td单元格内的空div) )在打印预览中根本不显示.另外,为什么左边黑色的白色文字打印不那样?
是否有适合打印的CSS的规则?这里有什么建议?
顺便说一句 - 我尝试在IE 10和Chrome中进行预览 - 几乎都做了同样的事情