Question

我正在使用AngularJS的bootstrap并尝试ng-repeat我购买的模板中的表格，当超过一定数量的表格放入orderInformation.items数组时，我遇到了关于打印看起来如何的问题

我希望能够点击打印并定义页面标题和定义的页脚，这些页脚不会改变，并且应该嵌套在所有页面的打印预览的顶部和底部。唯一会改变的内容是AngularJS正在进行ng-repeat的项目。

如何做到这一点？我一直在寻找日子和日子，似乎没有什么工作。

 <div class="row">
    <div class="col-md-12 card-box">
       <table id="invoice-contents" style="width: 100%">
          <thead>
           <!-- This is where logo, company details, barcode go -->
           </thead>
           <tbody>
             <table id="item-table" class="table m-t-30" style="border-bottom: 1px solid rgba(0,0,0,.1)">
               <thead>
                 <!-- Invoice Item headers -->
               </thead>
               <tbody>
                  <tr ng-repeat="item in orderInformation.items">
                    <td style="text-align: center">{{$index + 1}}</td>
                    <td style="text-align: center">{{item.qty.ordered}}</td>
                    <td style="text-align: center">{{item.qty.shipped}}</td>
                    <td style="text-align: center">{{item.qty.backordered}}</td>
                    <td style="text-align: center">{{item.binLocation}}</td>
                    <td style="text-align: center">{{item.partNumber}} - {{item.description}}</td>
                    <td style="text-align: center">{{item.price.current * item.qty.shipped | number: 2}}</td>
                    <td style="text-align: right">{{item.price.extended * item.qty.shipped | number: 2}}</td>
                </tr>
              </tbody>
            </table>
          </tbody>
         <tfoot>
            <!-- Special order notes, totals, taxes, terms -->
         </tfoot>
       </table>
     </div>
   </div> <!-- end container -->

当我使用我找到的推荐的CSS时，这不起作用：

  thead { display: table-header-group; }
  tbody { display: table-row-group; }
  tfoot { display: table-footer-group; }

文档说一个表不能有两个thead所以我知道问题就在那里，但我找不到任何其他方法来在除{之外的所有页面上打印顶部和底部的块{1}}。

Answer 1

通过大量试验和错误解决这个问题的方法是在单个发票页面的屏幕显示上显示多行数据，然后使用display:none隐藏仅在打印期间使用CSS显示的视图@media print。我必须计算每页上显示的行数，并使用.splice()和嵌套的ng-repeats来正确显示。

Bootstrap + AngularJS - 具有公共页眉/页脚的多页打印作业

1 个答案: