如何从HTML表格生成PDF？样式错乱及分页重叠问题求助

嘿，我碰到过不少开发者用旧版jsPDF处理长表格转PDF时遇到这种跨页重叠的问题，这主要是因为你用的jsPDF 1.3.4版本的fromHTML方法对复杂表格的分页逻辑支持有限，不会自动处理表头重复和内容间距调整。下面给你两个可行的解决方案：

方案1：手动控制分页与表头重复（适配旧版jsPDF） #

如果不想升级依赖，可以手动计算每页能容纳的行数，在每页开头重新添加表头，同时避开内容重叠的位置。

具体步骤和修改后的代码如下：

$scope.generatePDF = function () {
    var pdf = new jsPDF('p', 'pt', 'letter');
    var table = $('#div_print table')[0]; // 定位到表格DOM
    var headerRow = $(table).find('thead tr')[0]; // 获取表头行
    var contentRows = $(table).find('tbody tr'); // 获取所有内容行
    var pageHeight = pdf.internal.pageSize.height; // 获取页面总高度
    var currentY = 80; // 初始Y轴位置，对应你之前设置的top margin
    var estimatedRowHeight = 25; // 根据实际行高调整这个值
    var headerHeight = $(headerRow).outerHeight() * 1.1; // 表头高度，留一点余量

    // 先渲染第一页的表头
    pdf.fromHTML(headerRow, 10, currentY, {
        'width': 800,
        'elementHandlers': {
            '#bypassme': function (element, renderer) {
                return true;
            }
        }
    });
    currentY += headerHeight;

    // 遍历所有内容行，处理分页
    contentRows.each(function(index) {
        // 检查当前行是否会超出页面底部（预留底部边距）
        if (currentY + estimatedRowHeight > pageHeight - 10) {
            pdf.addPage();
            currentY = 80; // 新页面回到顶部起始位置
            // 渲染新页面的表头
            pdf.fromHTML(headerRow, 10, currentY, {
                'width': 800,
                'elementHandlers': {
                    '#bypassme': function (element, renderer) {
                        return true;
                    }
                }
            });
            currentY += headerHeight;
        }
        // 渲染当前内容行
        pdf.fromHTML(this, 10, currentY, {
            'width': 800,
            'elementHandlers': {
                '#bypassme': function (element, renderer) {
                    return true;
                }
            }
        });
        currentY += estimatedRowHeight;
    });

    pdf.save('PriceList.pdf');
};

注意：你需要根据实际表格的行高调整estimatedRowHeight的值，确保分页计算准确。

方案2：升级jsPDF并使用autoTable插件（更推荐） #

旧版jsPDF的fromHTML确实不太适合处理复杂表格，更省心的方式是升级到新版jsPDF，配合jspdf-autotable插件——它专门解决表格转PDF的分页、表头重复、样式适配等问题，比原生方法靠谱太多。

步骤1：替换依赖引用 #

把你原来的jsPDF引用换成新版本，再引入autotable插件：

<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>

步骤2：重写生成PDF的代码 #

用autotable的API替代fromHTML，代码会简洁很多，还能自动处理分页：

$scope.generatePDF = function () {
    const doc = new jspdf.jsPDF('p', 'pt', 'letter');
    const tableElement = $('#div_print table')[0];

    // 用autotable生成表格，自动处理分页和表头重复
    doc.autoTable({
        html: tableElement,
        startY: 80, // 表格起始的Y轴位置
        margin: { top: 80, bottom: 10, left: 10 },
        theme: 'striped', // 可选的表格主题，也可以自定义样式
        headStyles: { fillColor: '#f0f0f0' }, // 自定义表头背景色
        bodyStyles: { valign: 'middle' } // 内容单元格垂直居中
    });

    doc.save('PriceList.pdf');
};

这个方案不仅能彻底解决表头和内容重叠的问题，还支持更多自定义样式，比如列宽、单元格边框、页码等，后续扩展也更方便。

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