所有页面的间距 JSPDF

Question

我使用以下 link 的帮助在 JSPDF 中添加了 Header 和页脚。

我遇到的问题是 header 和 table 之间的间距仅反映在下载的 PDF 的第一页中。

您可以查看此处转载的示例 https://codesandbox.io/s/upbeat-cannon-cfiry?file=/src/App.js。

我需要帮助为 table 和 Header 之间的所有页面获取相同的 space。谢谢

代码：

import jsPDF from "jspdf";
import "jspdf-autotable";
import { datas } from "./data";
import { renderToString } from "react-dom/server";
import PdfDocument from "./PdfDocument";
export default function App() {
  const columns = [
    { title: "Rank", dataKey: "Rank" },
    { title: "Name", dataKey: "Name" },
    { title: "count", dataKey: "count" }
  ];

  var rows = datas?.map((data) => ({
    Rank: data?.Rank,
    Name: data?.Name,
    count: data?.count
  }));

  const downloadPdf = () => {
    var doc = new jsPDF("p", "pt");
    doc.setFontSize(20);
    doc.setTextColor(40);
    doc.setFontStyle("normal");
    doc.autoTable(columns, rows, {
      startY: 70,

      margin: { horizontal: 10 },
      styles: { overflow: "linebreak" },
      bodyStyles: { valign: "top" },
      columnStyles: { email: { columnWidth: "wrap" } },
      theme: "striped",
      showHead: "everyPage",
      didDrawPage: function (data) {
        // Header
        doc.setFontSize(16);
        doc.setTextColor("#161C22");
        doc.text("Table", data.settings.margin.left, 35);
        doc.text("Brand", 465, 34);

        // Footer
        let str = "" + doc.internal.getNumberOfPages();
        doc.setFontSize(10);

        // jsPDF 1.4+ uses getWidth, <1.4 uses .width
        let pageSize = doc.internal.pageSize;
        let pageHeight = pageSize.height
          ? pageSize.height
          : pageSize.getHeight();
        doc.text("Footer text", data.settings.margin.left, pageHeight - 10);
        doc.text(575, 830, str);
      }
    });

    doc.save("random.pdf");
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={downloadPdf}> Download PDF </button>
    </div>
  );
}

Answer 1

考虑添加

data.settings.margin.top = 70;

在 didDrawPage 函数的开头。

所有页面的间距 JSPDF

Spacing in all pages JSPDF

javascript

reactjs

jspdf

jspdf-autotable