JsPDF Tutorial to Insert Colorful Popup Annotations in PDF Document Using Javascript

jsPDF Tutorial to Insert Colorful Popup Annotations in PDF Document Using Javascript

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://parall.ax/parallax/js/jspdf.js"></script>
  <body>
      <button onclick="generatePDF()">Generate PDF</button>
  </body>
  <script>
      function generatePDF() {
 
      
        var pdf = new jsPDF('p', 'pt', 'letter');
        var y = 20;
        var w;
        var text = 'Text Annotations';
        pdf.text(text, 20, y);
 
        pdf.setFontSize(12);
 
        y += pdf.getLineHeight() * 2;
        pdf.text("Text Annotation With Popup (closed)", 20, y);
        pdf.createAnnotation({
            type: 'text',
            title: 'note',
            bounds: {
                x: 0,
                y: y,
                w: 200,
                h: 80
            },
            contents: 'This is text annotation (closed by default)',
            open: false
        });
 
        y += pdf.getLineHeight() * 5;
        pdf.text("Text Annotation With Popup (opened)", 20, y);
        pdf.createAnnotation({
            type: 'text',
            title: 'another note',
            bounds: {
                x: 0,
                y: y,
                w: 200,
                h: 80
            },
            contents: 'This is a text annotation  (opened)',
            open: true
        });
 
        y += pdf.getLineHeight() * 5;
        pdf.text("Free Text Annotation", 20, y);
        pdf.createAnnotation({
            type: 'freetext',
            bounds: {
                x: 0,
                y: y + 10,
                w: 200,
                h: 20
            },
            contents: 'This is a freetext annotation',
            color: '#ff0000'
        });
 
        pdf.save("output.pdf")
    }
 
    </script>
  </script>
  </html>

Share on:

Hi, I'm Ranjith a full-time Blogger, YouTuber, Affiliate Marketer, & founder of Coding Diksha. Here, I post about programming to help developers.

Leave a Comment