如何在jsPDF中添加PDF格式的水印?

时间:2017-03-16 10:59:40

标签: html pdf html5-canvas jspdf

我正在从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);
        }
    };

1 个答案:

答案 0 :(得分:2)

您可以先在每个页面上手动添加图像或文字水印,然后添加内容,使其不会相互重叠。

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

(OR)

在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/Purushoth/f55h4hzs/