如何用JavaScript限制打印PDF时每页表格仅显示5行？

Hey there! 看了你的需求，要让打印的PDF每页只显示5行表格数据，咱们可以用CSS的打印媒体查询来搞定，同时还能让表头在每页重复显示，提升打印文档的可读性。下面是具体的实现步骤和修改后的代码：

核心实现思路 #

• 借助@media print媒体查询，专门针对打印场景设置样式
• 使用CSS的page-break-before属性，在每5行数据后强制分页
• 设置表头（thead）在每页顶部重复显示，避免每页没有表头的尴尬
• 修正表格结构，确保CSS选择器能正确定位到数据行

1. 补充打印专用CSS样式 #

在你的HTML头部（或者弹窗的头部）添加这段打印专属样式，用来控制分页和表头：

@media print {
  /* 让表头在每一页打印时都显示 */
  thead {
    display: table-header-group;
  }
  /* 隐藏页面上的打印按钮，避免被打印出来 */
  body > div:first-child {
    display: none;
  }
  /* 每5行数据后强制分页：选择第1、6、11...行，在其前分页 */
  tbody tr:nth-child(5n+1) {
    page-break-before: always;
  }
  /* 第一行不需要分页，防止表头单独占一页 */
  tbody tr:first-child {
    page-break-before: avoid;
  }
  /* 调整打印内容的布局，适配纸张宽度 */
  #divToPrint {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    padding: 0;
  }
  #divToPrint .scrollingTable {
    width: 100% !important;
  }
}

2. 修正表格的HTML结构 #

你的原代码里表格的结构有小问题（比如第一行数据没有包裹在<tr>里，<tbody>标签位置不对），先把结构修正，确保所有数据行都在<tbody>内部：

<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>
        <tbody>
          <tr> 
            <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>
        </tbody>
      </table> 
    </div> 
  </div> 
</div>

3. 优化打印JavaScript函数 #

把打印专用CSS也写入弹窗，确保样式能正确生效，同时添加自动关闭弹窗的逻辑：

function PrintDiv(){
  var divToPrint = document.getElementById('divToPrint');
  var popupWin = window.open('','_blank','width=900,height=600');
  popupWin.document.open();
  popupWin.document.write(`
    <html>
    <head>
      <link href="Assests/css/bootstrap.min.css" rel="stylesheet"/>
      <style>
        @media print {
          thead { display: table-header-group; }
          tbody tr:nth-child(5n+1) { page-break-before: always; }
          tbody tr:first-child { page-break-before: avoid; }
          #divToPrint { display: block !important; width: 100% !important; height: auto !important; padding:0; }
        }
      </style>
    </head>
    <body onload="window.print(); setTimeout(() => window.close(), 500)">
      ${divToPrint.innerHTML}
    </body>
    </html>
  `);
  popupWin.document.close();
}

原理说明 #

• nth-child(5n+1) 会选中tbody里的第1、6、11...行，给这些行设置page-break-before: always，就能在它们前面强制分页，实现每页5行数据的效果
• table-header-group 是CSS打印专用属性，让thead元素在每一页的顶部重复显示，保证每页都有表头
• 修正表格结构是为了确保CSS选择器能准确选中所有数据行，避免样式失效

内容的提问来源于stack exchange，提问作者itsme