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

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 .

或者，如果您想基于此隐藏的 div (或我推荐的原始数据表)在 PrintDiv() 函数中动态生成 html，请尝试获取表行集合( link )并根据需要使用它:

document.getElementById("myTableId").rows;

编辑:由于我的 CSS 解决方案并不完美(请阅读 this 帖子评论)，您可以尝试为 php 代码中的每 5 行生成一个单独的表，然后添加它们，例如margin-bottom 参数