PDFMake.js Example to Add Colorful Text Watermark at Different Font Size or Angles to PDF Document in Browser Using Javascript Full Project For Beginners

 

 

 

Properties 

  • text – watermark text
  • color – color of text
  • opacity opacity of text
  • bold – bold style of text
  • italics – italics style of text
  • fontSize – own font size of text (ideal size is calculated automatically) (minimal version: 0.1.60)
  • angle – angle of text rotation (minimal version: 0.1.60)

 

 

index.html

 

 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PDFMake</title>
</head>

<body>

</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.70/pdfmake.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.70/vfs_fonts.js"></script>
<script>
  // playground requires you to assign document definition to a variable called dd

  var docDefinition = {
    watermark: { text: 'test watermark', color: 'blue', opacity: 0.3, bold: true, italics: false },

  content: [
    'paragraph 1',
    'paragraph 2',
    {
      columns: [
        'first column is a simple text',
        [
          // second column consists of paragraphs
          'paragraph A',
          'paragraph B',
          'these paragraphs will be rendered one below another inside the column'
        ]
      ]
    }
  ]
};
  pdfMake.createPdf(docDefinition).download();
</script>

</html>

Leave a Reply