page-before-before：始终冻结打印对话框

Question

我有一个html页面，可以生成一堆表格。 我需要在屏幕上看到该页面以及能够打印它。 在打印时，我要确保每个表格都以一张新纸开始。

为此，我使用了一个page-break-before: always h4标签的page-break-before: always css规则。 但是，这导致打印对话框在加载预览之前冻结，唯一的出路是关闭选项卡。

有谁知道为什么会发生这种情况以及如何解决它。 如果有更好的打印方法，我也想知道。 谢谢！

这是我的代码：

show.html.erb

<html>

 <html> <head> <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"> <link rel="stylesheet" type="text/css" media="print" href="print.css"> </head> <body> <!-- Table Page --> <% @reports.each do |report| %> <% next if report[1].empty? %> <div class="page-tables"> <!-- Table --> <div class="table-responsive"> <h4><%= report[0] %></h4> <table class="table table-hover table-bordered table-striped"> <thead> <th><%= report[0] %></th> <tr> <th>Name</th> <th>Other columns</th> </tr> </thead> <tbody> <% report[1].each do |line| %> <tr> <td><%= line[0] %></td> <td>Other columns</td> </tr> <% end %> </tbody> </table> <br> <% end %> <div class="clearfix"></div> </div> </div> </body>

和我的.css文件

 @media print { h4{ page-break-before: always; } tr:nth-child(even) td { background-color: #E2E1E1 !important; } }

我注意到的事情：-当我减少报表中生成的表的数量时，不会发生冻结-如果我保留大量的表但删除了page-break-before:always的css规则page-break-before:always也不会冻结-条带化的CSS规则不会引起问题

其他说明，不确定是否相关：-我在Chrome上进行开发-此后端是Rails应用程序-大约有20个表，每个表平均20行。 它们在屏幕上加载良好。 问题仅在我执行cmd + p打印时

Answer 1

我认为导致问题的原因是我的</div>结束标记位于<%end%> erb标记之后。 我解决了这个问题，现在可以了。

 <html> <head> <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"> </head> <body> <!-- Table Page --> <% @reports.each do |report| %> <% next if report[1].empty? %> <div class="page-tables break-before-table"> <!-- Table --> <div class="table-responsive"> <h4><%= report[0] %></h4> <table class="table table-hover table-bordered table-striped"> <thead> <th colspan="11"><%= report[0] %></th> <tr> <th>Name</th> </tr> </thead> <tbody> <% report[1].each do |line| %> <tr> <td><%= line[0] %></td> </tr> <% end %> </tbody> </table> <br> </div> </div> <% end %> </body>

page-before-before：始终冻结打印对话框

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-07-25 19:49:34

page-before-before：始终冻结打印对话框

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-07-25 19:49:34

解决方案1
0 已采纳 2017-07-25 19:49:34