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

问题描述 投票：0回答：4

我正在维护一个使用 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 年内解决”的问题。

还有另一个编辑进一步解释：

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

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

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

有人可能会说这是运气，也有人说这是“黑魔法”。我说“完成！下一步！” （虽然我对我一开始不理解这个问题这一事实并不满意。）

java html google-chrome gwt
4个回答
0
投票
您是否尝试过直接在表格标签内使用样式？

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

0
投票
<table border="1" > <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>
0
投票
<table border="1" > <tr> <th>Firstname</th> <th>Lastname</th> </tr> <tr> <td bgcolor="green">Peter</td> <td>Griffin</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> </tr> </table> 
/* 您可以添加尺寸为 1 或您想要的表格边框。 HTML 表格边框标签有助于将此功能添加到 Web 应用程序中。*/

    



      

      
      
      

      

        

          

            

              
0
投票

              
            

          

        

        
其他遇到同样问题的人可以使用“border:thinsolid#000;”来解决，其中边框厚度表示为“thin”而不是“1px”。

    



      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.