如何在 html2pdf.js 上添加页脚

Question

告诉我如何使用 html2pdf.js 向每个页面添加页脚 [工作版

  function test() {
    // Get the element.
    var element = document.getElementById('the-document');




    // Generate the PDF.
    html2pdf().from(element).set({
      filename:  'test.pdf',
      image: {type: 'jpeg',quality: 1.0},
            html2canvas: {dpi: 75, scale: 2, letterRendering: true},
      pagebreak: { mode: ['avoid-all', 'css', 'legacy'] },
      jsPDF: {orientation: 'portrait', unit: 'in', format: 'a4', compressPDF: true},
      // pdfCallback: pdfCallback
    }).save();

  }

Answer 1

尝试以下操作：

// config from your example
const config = {
      filename:  'test.pdf',
      image: {type: 'jpeg',quality: 1.0},
      html2canvas: {dpi: 75, scale: 2, letterRendering: true},
      pagebreak: { mode: ['avoid-all', 'css', 'legacy'] },
      jsPDF: {orientation: 'portrait', unit: 'in', format: 'a4', compressPDF: true},
      // pdfCallback: pdfCallback
    }

 html2pdf().from(content).set(config).toPdf().get('pdf').then((pdf) => {
    var totalPages = pdf.internal.getNumberOfPages();

    for (let i = 1; i <= totalPages; i++) {
      // set footer to every page
      pdf.setPage(i);
      // set footer font
      pdf.setFontSize(10);
      pdf.setTextColor(150);
      // this example gets internal pageSize just as an example to locate your text near the borders in case you want to do something like "Page 3 out of 4"
      pdf.text(pdf.internal.pageSize.getWidth() - 30,                
        pdf.internal.pageSize.getHeight() - 10, 'YOUR TEXT GOES HERE!');

       // you can add the line separator as an image, consult the docs below to properly set the place of the image
      pdf.addImage(img, 'png', 0, 0, 52, 23)
    }
   
  }).save();

  this.elementPDF.clear();

}

您可以在此处查看所有这些 jsPDF 方法文档：https://artskydj.github.io/jsPDF/docs/module-addImage.html !

Answer 2

html2pdf(element, {
    margin: 10,
    filename: 'Example.pdf',
    image: { type: 'jpeg', quality: 0.98 },
    html2canvas: { scale: 2, logging: true, dpi: 300, letterRendering: true },
    jsPDF: { unit: 'mm', format: 'a4', orientation: 'Portrait' }
}).toPdf().get('pdf')
.then(function (pdf) {
    var totalPages = pdf.internal.getNumberOfPages();

    for (let i = 1; i <= totalPages; i++) {
        pdf.setPage(i);
        pdf.setFontSize(10);
        pdf.setTextColor(150);
        //Add you content in place of example here
        pdf.text('example', pdf.internal.pageSize.getWidth() - 100, pdf.internal.pageSize.getHeight() - 10);
    }
}).save();