提问人：Phil-Absynth 提问时间：11/17/2023 更新时间：11/17/2023 访问量：32
如何在jsPDF Autotable中动态添加输入字段值？
How to add input field values in jsPDF Autotable dynamically?
问：
我正在创建一个包含三列的 HTML 表格形式的月计划，其中第一列是当天的日期，第二列是输入字段值，第三列是电话号码。
var pdf = new jsPDF({
orientation: 'p',
unit: 'mm',
format: 'a4',
putOnlyUsedFonts: true
});
var elem = document.getElementById("table-");
var res = pdf.autoTableHtmlToJson(elem);
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`);
这将正确创建第一列和第三列，但不会在第二列中显示输入字段值。这些值存储在 localStorage 中，可以从那里加载，但我不知道如何将它们添加到自动表中。
答：
0赞
Phil-Absynth
11/17/2023
#1
我从 Autotable GitHub 示例中找到并修改了一个函数，它现在可以工作了。
function dynamicRows(rowCount) {
rowCount = rowCount || 10
var body = []
for (var j = 1; j <= rowCount; j++) {
body.push({
datum: '//content here',
Mitarbeiter: localStorage.getItem('key name'),
id: j
})
}
return body
}
然后是创建 Autotable 的函数
function createAutotable(month, year) {
var pdf = new jsPDF({
orientation: 'p',
unit: 'mm',
format: 'a4',
putOnlyUsedFonts: true
});
const monthNumber = moment().month(month).format('M');
const daysInMonth = moment(`${year}-${monthNumber}`, 'YYYY-MM').daysInMonth();
var body = dynamicRows(daysInMonth);
body.forEach(function (row) {
row[0] = row.datum;
row[1] = row.Mitarbeiter;
row[2] = row.id;
});
pdf.autoTable({
startY: 30,
tableWidth: 'auto',
theme: 'grid',
head: [
//headers here
],
body: body
});
pdf.save('test.pdf');
}
评论