为什么谷歌浏览器不打印表格和单元格边框以及单元格背景颜色?

2022-09-04 23:37:35

我正在维护一个使用GWT创建的Web应用程序,该应用程序在历史上被开发为只能在Google Chrome中工作。

可以从系统中提取几个“报告”。实现方式如下:首先,创建报表的 html 并显示在屏幕的某个部分(这工作正常)。之后,有一个按钮可以打印报告。此操作将生成包含信息的 html(在 html 表中),方法与创建屏幕报告的方式相同,并使用它来创建 html 文件,然后将其发送到打印。

这是怪物露出脸的地方!(tum-dum-dummmm - 戏剧性的音乐)。

由于Google Chrome更新到verssion 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>

表格仍然无法正确打印(这在Chrome的打印预览中也可以看到(是的,即使选择了打印背景图像的选项))。如果我在表格的标签本身上设置表格的样式,也会发生同样的事情。像这样:

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

我没有想法,所以我问是否有人遇到过类似的问题,或者对我可以尝试什么有任何想法。

提前致谢。

并编辑以表明这与“可能的重复项”中的问题不同。我过去遇到过“背景颜色”问题,我已经修复了它。在这种情况下(如代码片段所示),似乎某些样式未被解释,例如表边框。在chrome 59.0.3071.86之前,一切都在工作,所以这似乎是一个新问题,而不是一个“在5年内解决的某个地方”的问题。

还有另一个编辑来进一步解释:

在我的网络应用程序的某个地方,有一个小按钮,上面写着“打印报告”。这将生成一个 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>
      <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应该如何显示:

Table with Borders and TD's Background

但是,当打印预览“弹出”时,这就是我得到的:

I preview some mistake

因此,背景颜色显示(我相信其他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,我在页面加载后让它打印。这样,它就可以工作,并以正确的格式进行打印。

有人可能会说是运气,有人会说是“黑魔法”。我说“完成了!下一个!(尽管我对我一开始就不理解这个问题的事实不满意)。


答案 1

您是否尝试过直接在表格标签中安装样式?

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

D.


答案 2