jspdf 上的页眉和页脚无法正常工作

Question

我试图在 html 脚本标签上将 html 转换为 pdf，应该这样做，这样我们就不需要使用服务器来制作报告。它不是一个网络应用程序，它将以其他与问题无关的方式使用。我无法使页眉和页脚正确显示在页面的顶部和底部，缺乏文档以及 jspdf 上从 html 更改为 html 的中断更改使事情变得更加困难。经过大量的特里之后，我变成了以下代码，但似乎在解决承诺之前设置页眉和页脚的循环结束。我只需要将 html 转换为 pdf，并在所有页面中包含标题，但我无法使用服务器或终端，我愿意按照代码使用其他库或语言（html 只是 HTML）：

  <meta charset="utf-8" />
  <title>jsPDF - Create PDFs with HTML5 JavaScript Library</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="" />
  <meta name="author" content="" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js">
  </script>
 

<script>

  function convertHTMLtoPDF() {
    const { jsPDF } = window.jspdf;

    let doc = new jsPDF("p", "pt", "a4");
    let pdfjs = document.querySelector("#divID");
    let header = document.querySelector("#header");
    let footer = document.querySelector("#footer");

    doc
      .html(pdfjs, {
        callback: function (doc) {},
        x: 12,
        y: 12,
        margin: [60, 10, 40, 10],
      })
      .then(() => {
        const totalPages = doc.internal.getNumberOfPages();

        let cont = 1;

        const addHeaderAndFooterToPage = () => {
          doc.setPage(cont);
          doc.setFontSize(12);

          doc.setFontSize(12);
          doc.html(header, { x: 10, y: 10 }).then(() => {
            doc
              .html(footer, { x: 10, y: doc.internal.pageSize.height - 50 })
              .then(() => {
                cont = cont + 1;
                if (cont <= totalPages) {
                  addHeaderAndFooterToPage(); // Chama a função recursivamente para a próxima    
          página
                } else {
                  doc.save("final.pdf");
                  console.log("acabou o loop");
                }
              });
          });
        };

        addHeaderAndFooterToPage(); // Inicia o processo
      });
  }
</script>
  

Answer 1

您似乎走在正确的道路上。您可以进行以下一些更改，以使代码按预期工作。

1- 首先，使用

doc.fromHTML

方法在顶部添加标题。将位置设置为 10，并将页脚设置在每页的底部 (y:

doc.internal.pageSize.height - 40

)。

2- 增加 cont 变量，使用 doc.addPage() 设置一个新页面，以确保将页眉和页脚添加到每个页面，然后递归调用

addHeaderAndFooterToPage

函数，直到处理完所有页面。

function convertHTMLtoPDF() {
  const { jsPDF } = window.jspdf;

  let doc = new jsPDF("p", "pt", "a4");
  let pdfjs = document.querySelector("#divID");
  let header = document.querySelector("#header");
  let footer = document.querySelector("#footer");

  doc.html(pdfjs, {
    callback: function (doc) {},
    x: 12,
    y: 12,
    margin: [60, 10, 40, 10],
  }).then(() => {
    const totalPages = doc.internal.getNumberOfPages();

    let cont = 1;

    const addHeaderAndFooterToPage = () => {
      doc.setPage(cont);
      doc.setFontSize(12);

      // Add header at the top of the page
      doc.fromHTML(header, 10, 10);

      // Add footer at the bottom of the page
      doc.fromHTML(footer, 10, doc.internal.pageSize.height - 40);

      cont++;

      if (cont <= totalPages) {
        doc.addPage();
        addHeaderAndFooterToPage();
      } else {
        doc.save("final.pdf");
        console.log("Finished creating the PDF.");
      }
    };

    addHeaderAndFooterToPage();
  });
}