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

You are currently viewing 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>

Ranjith

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

Leave a Reply