使用jsPDF转换HTML表格为PDF时表格跨页显示异常求助

你的问题根源在于doc.fromHTML()方法对长表格的分页支持不完善，容易出现内容截断、布局错乱的情况。下面是几个可行的解决方案：

方案1：使用jsPDF-autotable插件（推荐） #

这是jsPDF官方推荐的表格处理插件，专门解决表格分页、样式控制等问题，比原生fromHTML靠谱得多。

修改后的代码： #

function exportPDF(pdfName) {
    var doc = new jsPDF('p', 'pt', 'a4');
    var table = document.getElementById("tableForPdf");

    // 用autoTable生成表格，自动处理分页
    doc.autoTable({
        html: table,
        startY: 30, // 表格顶部距页面顶部的距离
        margin: { left: 80, bottom: 10 },
        styles: {
            cellPadding: 5,
            fontSize: 10
        },
        headStyles: {
            fillColor: '#eee' // 表头背景色，可按需调整
        }
    });

    doc.save(pdfName + '.pdf');
}

插件会自动识别表格结构，处理分页、表头重复展示等问题，样式也更易自定义。

方案2：结合html2canvas转图片后插入PDF #

如果你的表格样式特别复杂（比如合并单元格、特殊视觉效果），autoTable难以还原，可以先把表格转成图片，再按页面高度拆分插入PDF。

修改后的代码： #

function exportPDF(pdfName) {
    var doc = new jsPDF('p', 'pt', 'a4');
    var table = document.getElementById("tableForPdf");
    var pageHeight = doc.internal.pageSize.height - 40; // 减去上下边距

    html2canvas(table, { scale: 2 }).then(canvas => {
        var imgData = canvas.toDataURL('image/png');
        var imgWidth = 595; // A4宽度
        var imgHeight = canvas.height * imgWidth / canvas.width; // 等比例计算高度
        var position = 30; // 初始插入位置

        // 分页插入图片
        while (imgHeight > 0) {
            doc.addImage(imgData, 'PNG', 80, position, imgWidth, Math.min(imgHeight, pageHeight));
            imgHeight -= pageHeight;
            position = 30 - pageHeight; // 下一页的起始位置
            if (imgHeight > 0) {
                doc.addPage();
            }
        }
        doc.save(pdfName + '.pdf');
    });
}

注意：需先引入html2canvas库，这种方法的缺点是PDF中的表格内容无法选中，清晰度可通过调整scale参数优化。

方案3：手动拆分表格（原生jsPDF实现） #

如果不想引入额外插件，可以手动计算每页能容纳的行数，拆分表格后逐页插入：

修改后的代码： #

function exportPDF(pdfName) {
    var doc = new jsPDF('p', 'pt', 'a4');
    var table = document.getElementById("tableForPdf");
    var rows = table.querySelectorAll('tr');
    var pageHeight = doc.internal.pageSize.height - 60; // 上下边距总和
    var rowHeight = 25; // 预估每行高度，需根据实际情况调整
    var maxRowsPerPage = Math.floor(pageHeight / rowHeight);
    var startRow = 0;

    while (startRow < rows.length) {
        var endRow = Math.min(startRow + maxRowsPerPage, rows.length);
        // 创建临时表格，存放当前页的行
        var tempTable = document.createElement('table');
        // 复制表头（如果存在）
        if (startRow === 0 || table.querySelector('thead')) {
            var thead = table.querySelector('thead');
            tempTable.appendChild(thead.cloneNode(true));
        }
        // 添加当前页的行
        for (var i = startRow; i < endRow; i++) {
            tempTable.appendChild(rows[i].cloneNode(true));
        }

        // 插入当前页表格
        doc.fromHTML(tempTable, 80, 30, {
            'width': 595,
            'elementHandlers': specialElementHandlers
        });

        startRow = endRow;
        if (startRow < rows.length) {
            doc.addPage();
        }
    }

    doc.save(pdfName + '.pdf');
}

这种方法需要手动适配行高度，适合结构简单的表格，缺点是样式还原度不如插件。

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