文章/答案/技术大牛

发布

社区首页 >问答首页 >分页前:始终是冻结打印对话框。

问分页前:始终是冻结打印对话框。
EN

Stack Overflow用户

提问于 2017-07-25 15:54:01

回答 1查看 115关注 0票数 0

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

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

有没有人知道为什么会发生这种事，以及如何避免。如果有更好的印刷方法，我也想知道。谢谢!

这是我的代码：

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应用程序-There，它的后端大约有20个表，平均每张有20行。他们在屏幕上装得很好。只有当我做cmd+p打印时，才是问题

html

css

google-chrome

printing

report

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-07-25 19:49:34

我认为导致这个问题的原因是，我的</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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45308201

复制

相似问题

问分页前:始终是冻结打印对话框。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问分页前:始终是冻结打印对话框。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问分页前:始终是冻结打印对话框。
EN