如何在jsPDF Autotable生成的每张表格上方添加标题？

我明白你现在需要给用jsPDF Autotable生成的每张PDF表格加上标题，这其实很容易实现——我们只需要在渲染每个表格之前，用jsPDF自带的text()方法先绘制标题文本，再调整表格的起始位置即可。

下面是修改后的完整代码，我已经帮你补全了未完成的部分并添加了标题功能：

function generate() { 
    var doc = new jsPDF('l', 'pt', 'a3'); 
    // 设置标题字体样式（可选，比如加粗、放大字号）
    doc.setFontSize(14);
    doc.setFont('helvetica', 'bold');

    // 第一个表格的标题
    var firstTableTitle = "预测结果表";
    // 让标题居中显示，X坐标取页面宽度的一半
    var centerX = doc.internal.pageSize.getWidth() / 2;
    // 标题的起始Y位置，这里设为30（可按需调整）
    var titleY = 30;
    doc.text(firstTableTitle, centerX, titleY, { align: 'center' });

    // 渲染第一个表格，startY设为标题Y位置+20（留出标题和表格的间距）
    var res = doc.autoTableHtmlToJson(document.getElementById('predicts')); 
    doc.autoTable(res.columns, res.data,{ 
        startY: titleY + 20,
        styles: { overflow: 'linebreak', columnWidth: 65 } 
    }); 

    // 第二个表格的标题
    var secondTableTitle = "EMP预测表";
    // 第二个标题的Y位置：上一个表格结束位置 + 10（表格和标题的间距）
    var secondTitleY = doc.autoTableEndPosY() + 10;
    doc.text(secondTableTitle, centerX, secondTitleY, { align: 'center' });

    // 渲染第二个表格，startY设为第二个标题Y位置+20
    var res2 = doc.autoTableHtmlToJson(document.getElementById('EMPPredict')); 
    doc.autoTable(res2.columns, res2.data, { 
        startY: secondTitleY + 20,
        styles: { overflow: 'linebreak', columnWidth: 65 } 
    }); 

    // 保存PDF（按需添加）
    doc.save('多表格带标题文档.pdf');
}

关键细节说明： #

• 标题样式自定义：通过setFontSize()和setFont()可以调整标题的字号、字体和粗细，让标题更醒目。
• 标题居中技巧：利用doc.internal.pageSize.getWidth()获取页面宽度，取一半作为X坐标，再配合{ align: 'center' }参数实现居中显示。
• 位置精准控制：
  • 第一个表格的标题起始Y可以设固定值，表格的startY要比标题Y大一些，避免内容重叠。
  • 后续表格的标题Y位置基于上一个表格的结束位置（doc.autoTableEndPosY()）计算，确保标题紧跟在上一个表格下方，不会出现间距混乱的问题。
• 灵活调整：你可以根据需求修改标题的对齐方式、字体、间距，只需要调整text()方法的参数即可。

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