如何在 jsPdf 中为 React js 的 autoTable 指定坐标或提供边距？

Question

我正在使用 jsPdf 库在 React 中生成 pdf。但是如果单个页面中有多个 table，我将无法为 autoTable 提供边距！

代码如下：-

import React from "react";

var { jsPDF } = require("jspdf");
require("jspdf-autotable");

function ShowPdf() {
  const [head] = React.useState(["Name", "Email", "Country"]);
  const [body] = React.useState([
    ["David", "david@example.com", "Sweden"],
    ["David", "david@example.com", "Sweden"],
    ["David", "david@example.com", "Sweden"],
    ["David", "david@example.com", "Sweden"],
    ["David", "david@example.com", "Sweden"],
  ]);
  const generatePDF = () => {
    let doc = new jsPDF("p", "pt", "a4");

    doc.setFont("Calibri", "bold");
    doc.setFontSize(14);
    doc.setTextColor(14, 3, 64);
    doc.text("Table 1", 20, 140);
    doc.line(20, 142, 550, 142);

    doc.text("Table 2", 20, 300);
    doc.line(20, 302, 550, 302);

    doc.autoTable({
      margin: { top: 150, left: 20, bottom: 30 },
      head: [head],
      body: [body[0], body[1], body[2], body[3], body[4]],
    });

    doc.autoTable({
      margin: { top: 400, left: 20, bottom: 30 },
      head: [head],
      body: [body[0], body[1], body[2], body[3], body[4]],
    });

    window.open(doc.output("bloburl"), "_blank");
  };
  return (
    <div>
      <button onClick={generatePDF} type="primary">
        Generate PDF
      </button>
    </div>
  );
}

export default ShowPdf;

边距对第一个 table 起作用，但对第二个 table 提供或更改顶部边距没有反映任何变化！

我可以提供 jsPdf auto 的 x 和 y 坐标table吗？

Answer 1

找到答案了！我们可以使用 startY 为 table.

提供 y 坐标

如何在 jsPdf 中为 React js 的 autoTable 指定坐标或提供边距？

How to specify coordinates or provide margins for the autoTable in jsPdf for React js?

javascript

css

reactjs

jspdf

jspdf-autotable