Question

我正在维护一个使用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>

表格仍无法正确打印（这也可以在Chrome的打印预览中看到（是的，即使选择了打印背景图像））。如果我将表格放在桌子的标签上，也会发生同样的事情。类似的东西：

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

我没有想法，所以我问是否有人遇到过类似问题，或者对我能尝试什么有所了解。

提前致谢。

并编辑说这与“可能的重复”中的问题不同。我过去有“背景颜色”问题，我已修复它。在这种情况下（并且如代码片段所示），似乎没有解释某些样式，例如表格边框。一切都在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>
      <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 testbed”的图片来展示我的无所不在的html应该如何显示：

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

因此，背景颜色也不会显示（因为我相信其他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我在页面后打印已加载。这种方式有效，并以正确的格式打印。

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

Answer 1

您是否直接在表格标签内尝试过该风格？

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

d

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

1 个答案: