我正在尝试创建一个带有表格的PDF。
我的要求是将colspan应用于选择性数据,
我用了
https://simonbengtsson.github.io/jsPDF-AutoTable/#spans
&
https://github.com/simonbengtsson/jsPDF-AutoTable/blob/master/examples/examples.js#L258
以供参考。
在上面的示例中,colspan仅在第一页上实现,我也想在其他页面上继续使用。特别是在出现分页符的情况下,我想将colspan实现为位于标题下方的右侧
but the colspan is rendered at the beginning of the second page
这是我的working demo code that I have done so far 以下是我的示例代码
function createTableinPDF(tableData) {
var doc = new jsPDF("l", "pt");
doc.setFontSize(12);
doc.setTextColor(0);
doc.setFontStyle("bold");
doc.text("Account : ABC", 40, 20);
doc.text(" ID : 1", 40, 40);
doc.autoTable(tableData.columns, tableData.rows, {
theme: "grid",
startY: 50,
styles: { overflow: "linebreak", columnWidth: "wrap" },
drawRow: function(row, data) {
// Colspan
doc.setFontStyle("bold");
doc.setFontSize(10);
//adding page
var previousEndpointName =
row.index === 0
? ""
: data.table.rows[data.row.index - 1].raw.endPointName;
var currentendPOintName =
data.table.rows[data.row.index].raw.endPointName;
console.log(currentendPOintName);
var nextendPointName =
data.table.rows.length - 1 === row.index
? ""
: data.table.rows[data.row.index + 1].raw.endPointName;
var countofItems = data.table.rows.filter(
x => x.raw.endPointName === currentendPOintName
).length;
var allCellsHeight = data.table.rows
.filter(function(x) {
return x.raw.endPointName === currentendPOintName;
})
.map(rowdata => rowdata.height)
.reduce((a, x) => a + x);
var posY = row.y + allCellsHeight + data.settings.margin.bottom;
var pageHeight =
doc.internal.pageSize.height || doc.internal.pageSize.getHeight();
if (
row.index === 0 ||
row.index === 8 ||
row.index === 17 ||
row.index === 23
) {
var posY = row.y + allCellsHeight + data.settings.margin.bottom;
var pageHeight =
doc.internal.pageSize.height || doc.internal.pageSize.getHeight();
if (posY > pageHeight) {
data.addPage();
row.y = 0;
}
doc.setTextColor(200, 0, 0);
doc.rect(
data.settings.margin.left,
row.y,
data.table.width + 27.5,
15,
"S"
);
doc.autoTableText(
currentendPOintName,
data.settings.margin.left + data.table.width / 2,
row.y + 15 / 2,
{
halign: "center",
valign: "middle"
}
);
data.cursor.y += 15;
}
},
columnStyles: {
criteriaName: { columnWidth: 80 },
criteriaInc: { columnWidth: 355 },
criteriaExc: { columnWidth: 355 }
}
});
doc.save("table-colspan.pdf");
}
如果有人可以帮助我,将不胜感激。