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

Question

我是React和JavaScript的初学者。我一直在尝试找到解决问题的解决方案，但似乎找不到特定的解决方案。我正在使用“ JSPDF”和它的插件“ JSPDF-autotable”生成.pdf文档（客户发票）。

它都会生成确定的，给出每个元素（文本，图像，表），它是xy启动在JavaScript代码中的坐标。我有2张桌子。表A和表B。两者都垂直将一个位于另一个位置。当“表A”增加时，它是一段时间开始重叠“表B”的时间。表B具有固定数量的行。

如何避免“表A重叠”表B”，并在“表A”增加时将表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")
}

这里的所有行都是静态的（在我的应用程序中，我会通过一系列对象循环并盖上行，但是此示例解释了我的问题）将与“ 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);