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

【问题标题】：How to add watermark in PDF genereted from jsPDF?如何在从 jsPDF 生成的 PDF 中添加水印？
【发布时间】：2017-08-07 12:20:44
【问题描述】：

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

【问题讨论】：

什么不起作用？有关图像参数，请参阅例如 this answer
@K3N ：我搜索了答案，但没有找到任何答案。我尝试添加文本，但为此我需要属性来降低文本的透明度。
@K3N : 你知道如何在 jsPDF 中添加透明文本吗？

标签： html pdf html5-canvas jspdf

【解决方案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/Purushoth/f55h4hzs/

【讨论】：

感谢您的回答。我尝试了您的代码，但它没有与现有内容重叠。
我需要用现有内容覆盖整个页面的水印。
目前 jsPDF 不支持像这样的文本旋转 freephile.org/w/images/thumb/4/4e/Watermark_confidential.png/… 您可以先添加与页面大小相同的图像 (png)，然后再添加其余内容。所以实际内容不会与水印重叠。首先为您的页面添加水印，然后添加内容。也为每个新页面添加执行此操作！ @RonakChauhan
好的。如果对您有用，请将答案标记为已解决。以便其他人可以从中获得帮助:)
@Vasanth 你应该有一个颜色温和的 jpeg 图像并将其转换为 base64 字符串。 var imageData = 'base64:image......' doc.addImage(imageData , 'PNG', 40, 40, 75, 75);

【解决方案2】：

2021年方法是 pdfDoc.text(text, 100, pdfDoc.internal.pageSize.height - 100, {angle: 45, }); 问题是该方法是在其他元素上添加水印文本，您知道如何在其他元素后面添加水印吗？我最后添加了水印，因为我不知道我会有多少页（使用自动表格插件）

【讨论】：