jsPDF Tutorial to Add Watermark Text or Image to All Pages Using Javascript Full Project For Beginners

 

 

Welcome folks today in this blog post we will be adding watermark text or image to all pages using javascript. All the full source code of the application is shown below.

 

 

 

Get Started

 

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

 

index.html

 

 

 

<div>
  <button id="getPdf">Get PDF</button>
</div>

 

 

 

script.js

 

 

//Add event listener
document.getElementById("getPdf").addEventListener("click", getPdf);

function addWaterMark(doc) {
  var totalPages = doc.internal.getNumberOfPages();

  for (i = 1; i <= totalPages; i++) {
    doc.setPage(i);
    //doc.addImage(imgData, 'PNG', 40, 40, 75, 75);
    doc.setTextColor(150);
    doc.text(50, doc.internal.pageSize.height - 30, 'Watermark');
  }

  return doc;
}

function getPdf() {

  // Generate PDF
  var doc = new jsPDF('p', 'pt', 'a4');

  doc.text(100, 100, 'first page');

  doc.addPage();
  doc.text(100, 100, 'second page');

  doc = addWaterMark(doc);

  doc.save('test');

}

 

See also  jsPDF html2canvas.js Tutorial to Export HTML Table to PDF Document in Browser Using Semantic UI CSS Framework in Javascript Full Project For Beginners

 

Leave a Reply