打印PDF时实现HTML多列表格的自动列分页需求

问题描述 #

我有一个包含50列及以上的HTML表格，需求是打印为PDF时，若列无法在单页容纳，需自动移至下一页。该表格在Chrome浏览器中可通过滚动条正常显示所有列，但打印PDF时，超出页面的列被截断而非渲染到新页面。

附原始代码及打印截断效果截图：

原始HTML代码 #

<!DOCTYPE HTML>
<html>
<head>
<style>
@media print
{
  table { page-break-after:auto }
  tr    { page-break-inside:avoid; page-break-after:auto }
  td    { page-break-inside:avoid; page-break-after:auto }
  thead { display:table-header-group }
  tfoot { display:table-footer-group }
}
</style>
</head>
<body>
<table class="table">
  <thead style="color:#ceb03d">
    <tr>
      <th id="Column_Part1_1">Column_Part11</th>
      <th id="Column_Part1_2">Column_Part12</th>
      <th id="Column_Part1_3">Column_Part13</th>
      <th id="Column_Part1_4">Column_Part14</th>
      <th id="Column_Part1_5">Column_Part15</th>
      <th id="Column_Part1_6">Column_Part16</th>
      <th id="Column_Part1_7">Column_Part17</th>
      <th id="Column_Part1_8">Column_Part18</th>
      <th id="Column_Part1_9">Column_Part19</th>
      <th id="Column_Part1_10">Column_Part110</th>
      <th id="Column_Part1_11">Column_Part111</th>
      <th id="Column_Part1_12">Column_Part112</th>
      <th id="Column_Part1_13">Column_Part113</th>
      <th id="Column_Part1_14">Column_Part114</th>
      <th id="Column_Part1_15">Column_Part115</th>
      <th id="Column_Part1_15">Column_Part115</th>
      <th id="Column_Part2_1">Column_Part21</th>
      <th id="Column_Part2_2">Column_Part22</th>
      <th id="Column_Part2_3">Column_Part23</th>
      <th id="Column_Part2_4">Column_Part24</th>
      <th id="Column_Part2_5">Column_Part25</th>
      <th id="Column_Part2_6">Column_Part26</th>
      <th id="Column_Part2_7">Column_Part27</th>
      <th id="Column_Part2_8">Column_Part28</th>
      <th id="Column_Part2_9">Column_Part29</th>
      <th id="Column_Part2_10">Column_Part210</th>
      <th id="Column_Part2_11">Column_Part211</th>
      <th id="Column_Part2_12">Column_Part212</th>
      <th id="Column_Part2_13">Column_Part213</th>
      <th id="Column_Part2_14">Column_Part214</th>
      <th id="Column_Part2_15">Column_Part215</th>
      <th id="Column_Part2_15">Column_Part215</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in model.items"> <!-- The table contains several Columns. -->
      <td>Value_Part_1</td>
      <td>Value_Part_12</td>
      <td>Value_Part_13</td>
      <td>Value_Part_14</td>
      <td>Value_Part_15</td>
      <td>Value_Part_16</td>
      <td>Value_Part_17</td>
      <td>Value_Part_18</td>
      <td>Value_Part_19</td>
      <td>Value_Part_110</td>
      <td>Value_Part_111</td>
      <td>Value_Part_112</td>
      <td>Value_Part_113</td>
      <td>Value_Part_114</td>
      <td>Value_Part_115</td>
      
      <td>Value_Part_21</td>
      <td>Value_Part_22</td>
      <td>Value_Part_23</td>
      <td>Value_Part_24</td>
      <td>Value_Part_25</td>
      <td>Value_Part_26</td>
      <td>Value_Part_27</td>
      <td>Value_Part_28</td>
      <td>Value_Part_29</td>
      <td>Value_Part_210</td>
      <td>Value_Part_211</td>
      <td>Value_Part_212</td>
      <td>Value_Part_213</td>
      <td>Value_Part_214</td>
      <td>Value_Part_215</td>
    </tr>
  </tbody>
</table>
</body>
</html>

打印截断效果 #

解决方案 #

你当前的CSS仅处理了纵向分页（行的拆分），但未解决横向列超出页面的问题。要让超出的列自动转到下一页，需调整打印样式，允许内容横向溢出并生成新页面：

修改后的打印CSS #

@media print {
  body {
    width: auto;
    overflow-x: visible;
  }
  table {
    width: auto;
    page-break-inside: avoid;
  }
  tr {
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group; /* 确保表头在每一页都显示 */
  }
}

关键调整说明 #

• 取消页面宽度限制：body { width: auto; overflow-x: visible; } 让页面不再强制内容适配单页宽度，超出部分自动生成新的打印页面
• 表格自适应宽度：table { width: auto; } 避免表格被强制压缩，保留原始列宽
• 保持行完整性：page-break-inside: avoid 确保整行不会被拆分成两页，提升可读性

额外建议 #

在浏览器打印设置中选择横向打印，可以在单页容纳更多列，进一步减少分页数量。

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