使用jsPDF生成PDF时如何为每个页面添加一致的边距?

问题描述 投票:0回答:1

我目前正在开发一个项目,该项目涉及使用 JavaScript 中的 jsPDF 库生成 PDF 文档的简历模板。我正在尝试为 PDF 的每一页添加一致的边距(特别是底部边距),确保内容不会接触页面的侧面。然而,到目前为止我尝试过的方法还没有提供预期的结果。

我尝试过设置页脚功能和调整位置等方法,但不幸的是,我没有在所有页面上实现预期的一致底部边距。问题似乎仍然存在,内容仍然触及页面底部。

我正在寻求有关如何使用 jsPDF 为生成的 PDF 的每个页面正确添加一致的底部边距的指导。是否有替代方法或最佳实践来始终如一地实现这一目标?

我尝试了以下多种方法。检查下面的代码,这是最合适的代码。现在在这里我无法获得pdf中的底部边距。所以主要问题是 pdf 的下边距。

const handlePrint = () => {
    const pdf = new jsPDF({
      orientation: "portrait",
      unit: "mm",
      format: [297, 210], // A4 page size in mm
    });

    const content =
      types?.doctype === "resume" ? Resumeref.current : Coverref.current;

    const fontSize = 12;
    console.log("Page height:", pdf.internal.pageSize.getHeight());

    // Calculate the zoom level to fit content within the page
    const pageWidth = pdf.internal.pageSize.getWidth() - 17; // Adjust for left and right margins
    const pageHeight = pdf.internal.pageSize.getHeight() + 10;
    console.log("Page height:", pdf.internal.pageSize.getHeight());
    const contentWidth = content.clientWidth;
    const scale = pageWidth / contentWidth;
    const bottomMargin = 10; // Setting bottom margin to 10mm

    // Set the font size and scale the content
    pdf.setFontSize(fontSize);
    pdf.html(content, {
      x: 7,
      y: 7,
      html2canvas: { scale },
      callback: function (pdf) {
        pdf.save("document.pdf");
      },
    });
  };
reactjs pdf download jspdf
1个回答
0
投票

要添加底部边距,您可以在 jsPDF.html 方法的选项中将带有数字的数组传递给 margin 键:

pdf.html(content, {
    margin: [0, 0, 10, 0],
    x: 7,
    y: 7,
    html2canvas: { scale },
    callback: function (pdf) {
        pdf.save('document.pdf');
    },
});
© www.soinside.com 2019 - 2024. All rights reserved.