4

I am generating PDF from canva and using jsPDF to generate it.

https://github.com/MrRio/jsPDF

Here is my code what I am using I want to add watermark into page. Can anyone help me in that ?

 self.downloadCanvasObjectAsPDF = function () {
        canvas.deactivateAll().renderAll();

        try {
            canvas.getContext('2d');
            var imgData = canvas.toDataURL("image/jpeg", 1.0);
            var pdf = new jsPDF('p', 'mm', [297, 210]);
            pdf.addImage(imgData, 'JPEG', 5, 5);
            var namefile = 'export';
            if(namefile != null) {
                pdf.save(namefile + ".pdf");
                return true;
            }else{
                return false;
            }
        } catch(e) {
            alert("Error description: " + e.message);
        }
    };
Ronak Chauhan
  • 681
  • 1
  • 8
  • 22
  • What is not working? For image arguments, see for example [this answer](https://stackoverflow.com/questions/29578721/image-in-pdf-cut-off-how-to-make-a-canvas-fit-entirely-in-a-pdf-page/29578919#29578919) –  Mar 16 '17 at 12:40
  • @K3N : I searched for answer but I didn't find any answer. I tried with adding text with but for that I need property to reduce transparency of text. – Ronak Chauhan Mar 16 '17 at 13:51
  • @K3N : do you know how to add transparent text into jsPDF ? – Ronak Chauhan Mar 16 '17 at 14:03

2 Answers2

8

You can add your watermark be it an image or text manually at each page first, then add your contents so that it won't overlaps each other.

In this approach you have add/call the watermark on adding each new page too. doc.addPage();

(Or)

At the end of PDF generation you could call a function that perform adding watermarks for all pages.

Let's say I want to add watermark to all my pages after PDF generation.

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;
}

Call this function before saving the PDF

function getPdf() {

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

//Add content

//finally call the watermark
  doc = addWaterMark(doc);

  doc.save('test');

}

Fiddle here for reference: https://jsfiddle.net/Purushoth/f55h4hzs/

Purushoth
  • 2,673
  • 3
  • 22
  • 36
  • Thanks for answer. I tried your code but its not overlapping existing content. – Ronak Chauhan Mar 16 '17 at 13:55
  • I need watermark that cover entire page with existing contents. – Ronak Chauhan Mar 16 '17 at 13:56
  • Currently text rotation is not supported by jsPDF like this https://freephile.org/w/images/thumb/4/4e/Watermark_confidential.png/300px-Watermark_confidential.png You can add an image (png) same size of page first then add rest of the contents. So the actual content would not overlapped with watermark. First watermark your page then add content. Do this for each new page addition too! @RonakChauhan – Purushoth Mar 16 '17 at 14:07
  • 1
    Okay. Please mark the answer as resolved if it's work for you. So that others can get help from this :) – Purushoth Mar 16 '17 at 17:21
  • @Vasanth You should have a jpeg image with mild color and convert it to base64 string. var imageData = 'base64:image......' doc.addImage(imageData , 'PNG', 40, 40, 75, 75); – Purushoth Aug 18 '17 at 11:58
3

In 2021 the method is pdfDoc.text(text, 100, pdfDoc.internal.pageSize.height - 100, {angle: 45, }); The problem is that the method is adding the watermark text over the other elements, do you know how to add the watermarks behind the other elements. I am adding the watermark in the end, because i do not know how many page i will have (using auto table plugin)

Javorov1103
  • 119
  • 1
  • 9