如何在jsPDF生成的PDF中添加水印？

Question

我正在从canva 生成PDF 并使用jsPDF 生成它。

https://github.com/MrRio/jsPDF

这是我正在使用的代码，我想将水印添加到页面中。有人能帮我吗？

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

Answer 1

您可以先在每个页面上手动添加水印，无论是图像还是文本，然后添加内容，以免相互重叠。

在这种方法中，您也可以在添加每个新页面时添加/调用水印。 doc.addPage();

（或者）

在 PDF 生成结束时，您可以调用一个函数来为所有页面添加水印。

假设我想在 PDF 生成后向所有页面添加水印。

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

在保存 PDF 之前调用此函数

function getPdf() {

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

//Add content

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

  doc.save('test');

}

在这里小提琴供参考：https://jsfiddle.net/Puruushoth/f55h4hzs/