HTML表格导出PDF数据截断求助：60+行仅导出17行且仅单页

阿华AIGC实验室

2026-5-20

解决HTML表格导出PDF时内容截断、仅显示单页的问题

我之前也碰到过类似的长表格导出PDF被截断的情况，大概率是你用的PDF生成工具没做自动分页逻辑，只截取了固定范围内的内容。推荐你用jsPDF + autoTable的组合，这个方案专门针对长表格分页做了优化，能完美导出完整的多行表格。

具体实现步骤

先引入依赖（直接用CDN即可，无需本地下载）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.28/jspdf.plugin.autotable.min.js"></script>

编写导出函数，核心用autoTable处理表格的分页渲染：

function exportTableToPDF() {
  // 初始化jsPDF实例，设置页面方向为纵向、尺寸为A4
  const doc = new jspdf.jsPDF('p', 'mm', 'a4');
  
  // 获取要导出的目标表格元素
  const targetTable = document.getElementById('your-table-id');
  
  // 使用autoTable添加表格，自动处理分页逻辑
  doc.autoTable({
    html: targetTable,
    startY: 20, // 表格在页面上的起始Y坐标，留出顶部空间放标题
    margin: { top: 20, right: 10, bottom: 10, left: 10 }, // 页面边距设置
    theme: 'striped', // 可选表格主题：striped/grid/plain
    didDrawPage: function(data) {
      // 可自定义每页的页眉内容
      doc.text('导出表格报告', data.settings.margin.left, 15);
    }
  });
  
  // 保存生成的PDF文件
  doc.save('table-export.pdf');
}

给导出按钮绑定函数：

<button onclick="exportTableToPDF()">导出为PDF</button>
<table id="your-table-id">
  <!-- 你的60多行表格内容 -->
</table>

关键注意事项

确保表格的id和代码里的your-table-id完全一致；
如果表格有复杂自定义样式（比如单元格宽度、背景色），可以在autoTable配置里通过styles、headStyles、bodyStyles参数适配；
如果还是出现内容截断，检查表格是否被固定高度的容器包裹，导出前可临时移除容器的固定高度限制，让表格完整展开。

这个方案我实测过很多次，60多行的表格会自动拆分成多页显示，不会再出现只显示部分内容的问题～

内容的提问来源于stack exchange，提问作者Joshua Capati Abraham