jspdf中内容长于页面时如何将内容移动到下一页

Question

在jsPDF和React.js中，如果内容比页面长，如何将内容移动到下一页并使页面不重叠？现在我使用 pdf.html() 函数将 html/react 元素生成为 pdf，但仍然坚持寻找一种在内容超出页面高度时自动移动到下一页的方法。

我的报告模板代码： https://pastebin.com/tWP4LMk2

这是为了将模板渲染为字符串以生成 pdf

const ComponentString = renderToString(
    <ReportTemplate
      title='Example Pdf file'
      type={printType}
      data={data}
    />
  );

  useEffect(() => {
      generatePdf({
        ComponentString,
        fileName: 'docs.pdf'
      });
    }
  }, [printType]);

我的生成Pdf代码：

import jsPDF from 'jspdf';

export const generatePdf = ({ ComponentString, fileName }) => {
  const pdf = new jsPDF({
    format: "a4",
    unit: "px"
  });

  pdf.html(ComponentString, {
    callback(doc) {
      doc.save(fileName);
    } 
  });
}

谢谢你。

Answer 1

您只需添加 autoPaging true 或 text 的选项

await pdf.html(tempContainer, {
  callback: async(pdf) => {
  },
  margin: [10, 10, 10, 10], // top, left, bottom, right margins
  autoPaging: 'text', // Automatically add new pages if content overflows
  x: 0,
  y: 50,
  // width: 100,
  html2canvas: {
    scale: 0.5 // Adjusts the resolution of the output
  }
});