'how add footer on html2pdf.js

Tell me how to add a footer to each page using html2pdf.js [working version][1]

  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();

  }
html2pdf


Solution 1:[1]

Try the following:

// 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();

}

You can check all of these jsPDF methods documentation here: https://artskydj.github.io/jsPDF/docs/module-addImage.html !

Solution 2:[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();

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Bárbara Perim
Solution 2 kanna

Related Questions