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

问：

我正在维护一个使用 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 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（与我想要打印的 html 完全相同），并使用 javascript，在加载页面后打印它。这样做，它可以工作，并且它以正确的格式打印。

有人可能会说这是运气，也有人说这是“黑魔法”。我说：“完成了！下一个！（虽然我对我一开始就不理解这个问题感到不满意。

HTML 谷歌浏览器

<!DOCTYPE html>
<html>
   <head>
      <style>
         table, th, td {
  border: 1px solid black;
} 
      </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>

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

Why is Google Chrome not printing table and cell borders, and cell background colors?

评论

评论

评论