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>
