当一个表格增加行数时，如何调整jsPDF文档中的元素，避免表格或文本垂直重叠？

Question

我是 React 和 Javascript 的初学者。我一直在尝试寻找解决我的问题的方法，但似乎找不到具体的解决方案。我正在使用“jsPdf”及其插件“jspdf-autoTable”生成 .pdf 文档（客户发票）。

只要给每个元素（文本、图像、表格）它是 JavaScript 代码中的 XY 起始坐标，一切都会生成 OK。我有 2 张桌子。表 A 和表 B。两者垂直放置。当“表 A”增加其行数时，有时它会开始与“表 B”重叠。表 B 的行数是固定的。

如何避免“A表”与“B表”重叠，并且当“A表”增加时让“A表”下面的所有内容动态“向下”移动？

示例：

const generatePDF = () => {

        const unit = "pt";
        const size = "A4"
        const orientation = "portrait";

        const doc = new jsPDF(orientation, unit, size);

        let contentA = {
            head: [["Item", "Quantity", "Price", "Item Total"]],
           
            body: [
                ['Water Bottle A', '1', '8.99', '8.99'],
                ['Water Bottle B', '1', '8.99', '8.99'],
                ['Water Bottle C', '1', '8.99', '8.99'],
                ['Water Bottle D', '1', '8.99', '8.99'],
               ],
            foot: [['', '', 'Total:', '35.96']],
            margin: 40,
            tableLineWidth: 0.5,
            tableLineColor: "black",
            tableWidth: 'auto',
            startY: 100,
            theme: 'striped',
            pageBreak: 'auto',
        }

        let contentB = {
            head: [["Subtotal", "$35.96"]],
           
            body: [
                ['Taxes', '$4.49'],
                ['Payment Method:', 'Cash'],
               ],
            foot: [['Total:', '35.96']],
            margin: 40,
            tableLineWidth: 0.5,
            tableLineColor: "black",
            tableWidth: 'auto',
            startY: 150,
            theme: 'striped',
            pageBreak: 'auto',
        }

        doc.autoTable(contentA)
        doc.autoTable(contentB)
        doc.text('Thank you for your purchase!', 150, 800);
        doc.save("my-report-document.pdf")
}

这里的所有行都是静态的（在我的应用程序中，我循环遍历对象的购物车数组并生成行，但这个示例解释了我的问题），如果我在“contentA”的 body 属性中添加 30 行以上，则该表将与“contentB”表重叠。

“startY”属性是目前唯一建立每个表的起始“Y”坐标的属性。我不介意“表 A”下面的内容是否会分成第二页，我只是想摆脱垂直重叠。

任何帮助将不胜感激。

Answer 1

你可以使用：

doc.lastAutoTable.finalY

像这样：

doc.text('Thank you for your purchase!', 150, doc.lastAutoTable.finalY + 30);

Answer 2

let finalY = doc.lastAutoTable.finalY;
doc.text('Payments can be remitted to the Commerce City address', 10, doc.lastAutoTable.finalY + 10);