如何用jsPDF将含200行的HTML表格转为每行一页的多页PDF？

原代码直接将整个表格一次性导出，无法实现每行单独占一页的需求。可以通过拆分表格行，逐行生成PDF页面的方式解决，具体代码如下：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script>
function exportToPDF() {
  var doc = new jsPDF();
  var table = document.getElementsByTagName("table")[0];
  // 提取表头（优先取thead的行，没有则取第一行）
  var headerRow = table.querySelector("thead tr") || table.rows[0];
  // 提取数据行（优先取tbody的行，没有则跳过表头行）
  var rows = table.querySelectorAll("tbody tr") || Array.from(table.rows).slice(1);
  
  // 定义每页内容的位置和宽度
  const xPos = 15;
  const yPos = 15;
  const contentWidth = 180;

  rows.forEach((row, index) => {
    // 创建临时表格，仅包含表头和当前数据行
    const tempTable = document.createElement("table");
    tempTable.appendChild(headerRow.cloneNode(true));
    tempTable.appendChild(row.cloneNode(true));
    
    // 将临时表格渲染到当前PDF页面
    doc.fromHTML(tempTable, xPos, yPos, {
      'width': contentWidth,
      'elementHandlers': {
        '#ignorePDF': function (element, renderer) {
          return true;
        }
      }
    });
    
    // 非最后一行时添加新页面
    if (index !== rows.length - 1) {
      doc.addPage();
    }
  });

  doc.save('report.pdf');
}
</script>

<button onclick="exportToPDF()">Export to PDF</button>

关键说明 #

• 单独提取表头和数据行，确保每页都能显示表头，保持内容完整性
• 循环处理每个数据行，通过临时表格生成仅包含当前行的PDF页面
• 处理完一行后（除最后一行）调用addPage()创建新页面，实现每行一页的效果
• 保留原代码的elementHandlers配置，兼容需要忽略特定元素的场景

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