如何在jsPDF Autotable中动态添加输入框字段值？

你的问题出在pdf.autoTableHtmlToJson()只会读取表格单元格的静态HTML内容，而输入框的实际值（存在localStorage或输入框的value属性中）不会被自动提取。需要手动遍历表格数据，将第二列的内容替换为对应的值。

解决方案代码 #

var pdf = new jsPDF({
    orientation: 'p',
    unit: 'mm',
    format: 'a4',
    putOnlyUsedFonts: true
});
var elem = document.getElementById("table-");
var res = pdf.autoTableHtmlToJson(elem);

// 关键：替换第二列的内容为输入框值或localStorage中的值
const inputs = elem.querySelectorAll('td:nth-child(2) input'); // 获取第二列所有输入框
res.data.forEach((row, index) => {
    // 方式1：直接读取输入框当前值
    row[1] = inputs[index]?.value || '';
    
    // 方式2：从localStorage读取（如果值存在localStorage，假设key和第一列日期关联）
    // const storageKey = `schedule_${row[0]}`;
    // row[1] = localStorage.getItem(storageKey) || '';
});

pdf.autoTable(res.columns, res.data, {
    startY: 30,
    tableWidth: 'auto',
    theme: 'grid',
    headStyles: {
        fillColor: '#a9a6a6',
        textColor: '#000000'
    },
    columnStyles: {
        0: { cellWidth: 15 }
    }
});
pdf.save(`Test.pdf`);

说明 #

• 方式1适用于输入框的当前值就是你需要导出的内容，直接通过DOM获取输入框的value属性。
• 方式2适用于值存储在localStorage中，你可以根据第一列的日期（或其他唯一标识）作为key，从localStorage中取出对应值替换第二列内容。

内容的提问来源于stack exchange，提问作者Phil-Absynth