Question

我有一个表格，我正在显示来自php mysql的所有数据，如下面图像。之后我添加了打印按钮并将所有数据放到div中，当我点击时样式显示无在打印按钮上，所有数据都以pdf格式显示。但是我想限制每个页面只能有5行。我该怎么做呢请帮助任何人都会赞赏。谢谢提前。

HTML

<div style="width:25%;float:left;padding-top:50px;">
   <input style="width:25%;height:4%;color:blue;background-color:white;" type="submit" name="Print" value="Print" onclick="PrintDiv()"/>
</div>
<div id="divToPrint" style="display:none;">
   <div style="width:900px;height:500px;background-color:white;padding-
      top:50px;">
      <p style="text-align:center;font-weight:bold;font-
         size:15px;">VendorDetails</p>
      <div class="scrollingTable result" style="width:100%;">
         <table id="myTable" class="table table-striped table-bordered table-fixed" cellspacing="0" style="width:100%;padding-top:20px;">
            <thead>
               <tr>
                  <th>Name</th>
                  <th>Address</th>
                  <th>Telephone</th>
                  <th>Email</th>
               </tr>
            </thead>
            <td>xl health systems pvt ltd</td>
            <td>madapur hitech city hyderabad,Tripura-654121
            </td>
            <td>9874213021,9701255365</td>
            <td>mnvbgr@gmail.com</td>
            </tr>
            <tr>
               <td>TTK solutionsss</td>
               <td>white field Bangalore,Karnataka-560078
               </td>
               <td>9874512352,9854231852</td>
               <td>ttk@gmail.com</td>
            </tr>
            <tr>
               <td>harman</td>
               <td>itpl bangalore,Karnataka-560012
               </td>
               <td>8794566666,9874522333</td>
               <td>mvvgfg@gmail.com</td>
            </tr>
            <tr>
               <td>abc systems</td>
               <td>chennai,Karnataka-564201</td>
               <td>9874123012,9870142321</td>
               <td>abcsystems@gmail.com</td>
            </tr>
            <tr>
               <td>primus systems</td>
               <td>delhi gurgon,Tripura-450210</td>
               <td>8978123012,9989870121</td>
               <td>primus@gmail.com</td>
            </tr>
            <tr>
               <td>new vision systems</td>
               <td>chennai,Karnataka-564201</td>
               <td>9874123012,9870142321</td>
               <td>abcsystems@gmail.com</td>
            </tr>
            <tr>
               <td>focus systems</td>
               <td>delhi gurgon,Tripura-450210</td>
               <td>8978123012,9989870121</td>
               <td>primus@gmail.com</td>
            </tr>
            <tr>
               <td>philips systems</td>
               <td>chennai,Karnataka-564201</td>
               <td>9874123012,9870142321</td>
               <td>abcsystems@gmail.com</td>
            </tr>
            <tr>
               <td>education systems</td>
               <td>delhi gurgon,Tripura-450210</td>
               <td>8978123012,9989870121</td>
               <td>primus@gmail.com</td>
            </tr>
            <tr>
               <td>new systems</td>
               <td>chennai,Karnataka-564201</td>
               <td>9874123012,9870142321</td>
               <td>abcsystems@gmail.com</td>
            </tr>
            <tr>
               <td>sony systems</td>
               <td>delhi gurgon,Tripura-450210</td>
               <td>8978123012,9989870121</td>
               <td>primus@gmail.com</td>
            </tr>
            <tr>
               <td> vision systems</td>
               <td>chennai,Karnataka-564201</td>
               <td>9874123012,9870142321</td>
               <td>abcsystems@gmail.com</td>
            </tr>
            <tr>
               <td>xiomi systems</td>
               <td>delhi gurgon,Tripura-450210</td>
               <td>8978123012,9989870121</td>
               <td>primus@gmail.com</td>
            </tr>
            <tr>
               <td>prime systems</td>
               <td>chennai,Karnataka-564201</td>
               <td>9874123012,9870142321</td>
               <td>abcsystems@gmail.com</td>
            </tr>
            <tr>
               <td>redmi systems</td>
               <td>delhi gurgon,Tripura-450210</td>
               <td>8978123012,9989870121</td>
               <td>primus@gmail.com</td>
            </tr>
            <tr>
            </tbody>
         </table>
      </div>
   </div>
</div>

用于打印数据的JavaScript代码

  function PrintDiv(){
       var divToPrint = document.getElementById('divToPrint');
       var popupWin = window.open('','_blank','width=900,height=500');
       popupWin.document.open();
       popupWin.document.write('<html><head><link href="Assests/css/bootstrap.min.css" rel="stylesheet"/></head><body onload="window.print()">' + divToPrint.innerHTML + '</html>');
       popupWin.document.close();
  }

Answer 1

您可以在PHP代码中生成每个第五个tr元素的样式。也许添加一些余量来强制下一个tr元素转到下一页？

您也可以使用nth-child（link）在css中执行此操作。示例here。

或者如果你想在你的PrintDiv（）函数中根据这个隐藏的div（或我推荐的oryginally数据表）动态生成你的html，尝试获取表行集合（link）并将其用作你喜欢：

document.getElementById("myTableId").rows;

编辑：由于我的css解决方案并不完美（阅读this发表评论），您可以尝试为PHP代码中的每5行生成一个单独的表，然后添加他们，例如margin-bottom参数

使用打印时，使用javascript限制每页的行数

HTML

用于打印数据的JavaScript代码

1 个答案: