Google Chrome为什么不打印表格和单元格边框以及单元格背景颜色？

我在维护一个使用GWT创建的Web应用程序，它历来被开发为只能在Google Chrome中使用。Google Chrome为什么不打印表格和单元格边框以及单元格背景颜色？

有几个“报告”可以从系统中提取。实现的方式如下：首先，创建报表的html并将其显示在屏幕的一部分中（这可正常工作）。之后，有一个按钮可以打印报告。这个动作产生html的信息（在html表格中），就像创建屏幕报告的方式一样，并使用它创建一个html文件，然后发送到打印机。

这是怪物展示它的脸！（tum-dum-dummmm - 戏剧性的音乐）。

由于Chrome浏览器已更新至版本59.0.3071.86，因此在打印时，表格/单元格会丢失其边框和背景颜色。

我想，也许它已经comething与生成的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>

表仍然没有得到正确打印（这被认为是也在Chrome的打印预览（是的，即使有选择打印背景图像的选项））。如果我在桌子标签本身上设置桌子的样子，也会发生同样的情况。喜欢的东西：

<table style="border: 1px solid black !important;">

我的想法，所以我问，如果有人钻进了一个类似的问题，或有关于我有什么可以尝试任何想法。

在此先感谢。

并编辑说，这不是“可能的重复”中的问题。过去我有过“背景颜色”问题，我已经修复了它。在这种情况下（和代码片段所示），似乎有些样式不被解释，例如表格边框。所有事情都在铬合金59.0.3071.86之前工作，所以它似乎是一个新问题，而不是“在5年内解决某个问题”。

而另一个编辑解释远一点：

某处在我的web应用程序，有一个小按钮，上面写着“打印报告”。这会生成一个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> 
     <h2>Add a border to a table:</h2> 
     <table> 
     <tr> 
      <th>Firstname</th> 
      <th>Lastname</th> 
     </tr> 
     <tr> 
      <td bgcolor="#FF0000">Peter</td> 
      <td>Griffin</td> 
     </tr> 
     <tr> 
      <td>Lois</td> 
      <td>Griffin</td> 
     </tr> 
     </table> 
    </body> 
</html>

注意我是如何使用

body { -webkit-print-color-adjust: exact; }

而且，我试着像造型的一些变化表：

<table style="border: 1px solid black !important;">

或身体为

<body style="-webkit-print-color-adjust: exact;">

我就从“HTML试验床”添加图片显示我的无所不在的html如何显示：

然而，当打印预览“啪啪”，这是我所得到的：

所以，无论是否backgound彩色显示器（我相信发生在其他SO用户，但他们的解决方案不能在这里工作），也不表格的边框。

其他编辑：我试图定义“专用打印CSS规则”，具体如下：

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
     @media print { 
      body { -webkit-print-color-adjust: exact; } 
      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 bgcolor=\"#FF0000\">Peter</td> 
      <td>Griffin</td> 
     </tr> 
     <tr> 
      <td>Lois</td> 
      <td>Griffin</td> 
     </tr> 
    </table> 
    </body> 
</html>

，但我像以前一样得到同样的结果。另外（也许这是相关的...也许它不是），如果我定义，例如，表宽度，打印时正确显示样式，而表边界仍然隐藏/不存在/神奇地删除（选择了一个）。

最后编辑 - 解决方法： 我是不能够解决问题本身，我真的不明白为什么会发生。我能做的是得到一个解决方法的工作，我在这里发布它不是一个答案，但仍跳它可以帮助某人：

我这样做的方式是：当我按下打印按钮，我打开一个只有我想打印的html（正如我想要的那样打印）的新窗口，并且使用javascript，在页面加载完成后打印它。这种方式工作，并以正确的格式打印。

有人可能会说这是运气，别人“黑魔法”。我说“完成！下一个！” （尽管我并不满意这个事实，但我并不了解这个问题）。

来源

2017-06-16 camilo

的[在Chrome中打印背景颜色]可能的复制（https://stackoverflow.com/questions/2392366/print-background-colours-in-chrome） –

就在昨天看到了同样[问题太]（https://stackoverflow.com/questions/44571567/print-angular-webpage-with-css-styling-applied-to-it） –

它不是。不过谢谢。 – camilo

您是否尝试过直接在表格标签内的样式？

<table border="1px" bgcolor="green"> 
<tr> 
<td>ANYTHING RANDOM 
</td> 
</tr> 
</table>

来源

2017-09-29 14:09:01

Google Chrome为什么不打印表格和单元格边框以及单元格背景颜色？

回答

相关问题