Question

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

为了实现这一点，我对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规则，那么也没有冻结 - 条带化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-break-before：始终是冻结打印对话框

1 个答案: