page-break-before: 总是冻结打印对话框

Question

我有一个生成一堆 table 的 html 页面。我需要在屏幕上看到此页面并能够打印它。当我打印时，我想确保每个 table 都从一张新纸开始。

为此，我对 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;
  }




}

我注意到的事情： - 当我减少报告中生成的 table 的数量时，不会发生冻结 - 如果我保留大量 table 但删除 page-break-before:always 的 css 规则也不会冻结 - 条纹 css 规则不会导致问题

其他说明，不确定是否相关： - 我在 Chrome 上开发 - 后端是一个 rails 应用程序 - 大约有 20 table 行，平均每行 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-break-before: 总是冻结打印对话框

page-break-before: always is freezing print dialog box

html

css

printing

google-chrome

report