2017-03-16 1128 views
1

我从canva生成PDF并使用jsPDF生成它。如何在jsPDF中添加PDF生成水印?

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

什么是不工作?对于图像参数,请参阅例如[这个答案](https://stackoverflow.com/questions/29578721/image-in-pdf-cut-off-how-to-make-a-canvas-fit-entirely-in- a-pdf-page/29578919#29578919) – K3N

+0

@ K3N:我搜索了答案,但是我没有找到任何答案。我尝试添加文本,但为此我需要属性来减少文本的透明度。 –

+0

@ K3N:你知道如何将透明文本添加到jsPDF吗? –

回答

1

您可以手动在每一页第一添加水印被它的图像或文字,然后添加您的内容,这样就不会彼此重叠。

在这种方法中,您也可以在添加每个新页面时添加/调用水印。 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; 
} 

呼叫

function getPdf() { 

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

//Add content 

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

    doc.save('test'); 

} 

小提琴这里保存PDF参考之前此功能:https://jsfiddle.net/Purushoth/f55h4hzs/

+0

感谢您的回答。我试过了你的代码,但它没有重叠现有的内容。 –

+0

我需要使用现有内容覆盖整个页面的水印。 –

+0

jsPDF不支持此文本旋转https://freephile.org/w/images/thumb/4/4e/Watermark_confidential.png/300px-Watermark_confidential.png 您可以添加一个图像(PNG)相同的大小的页面,然后添加其余的内容。所以实际的内容不会与水印重叠。 首先为您的页面添加水印,然后添加内容。为每个新页面添加它也是如此! @RonakChauhan – Purushoth