Wrapper for PDF JS to Add Annotations | pdfannotate.js

More Features:

• Supports PDFs with multiple pages
• Free draw tool
• Add text
• Add arrows
• Add rectangles
• Add image
• Change colors
• Change Brush size
• Change Font size
• Every object can be resize
• Serialize all canvas data into JSON and re-draw
• Delete individual object
• Clear page
• Export PDF with annotations (using jsPDF)

How to make use of it:

1. Load the required assets within the doc.

<!-- jQuery -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- Bootstrap 4 -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.min.js"></script>

<!-- Font Awesome -->
<link rel="stylesheet" href="/path/to/cdn/font-awesome.min.css" />

<!-- PDF.js -->
<script src="/path/to/cdn/pdf.min.js"></script>
<script>pdfjsLib.GlobalWorkerOptions.workerSrc = '/path/to/cdn/pdf.worker.min.js';</script>

<!-- fabric.js -->
<script src="/path/to/cdn/fabric.min.js"></script>
<script src="./arrow.fabric.js"></script>

<!-- jspdf.js -->
<script src="/path/to/cdn/jspdf.umd.min.js"></script>

2. Load the pdfannotate.js plugin’s files into the doc.

<!-- Core Stylesheet -->
<link rel="stylesheet" href="./pdfannotate.css">

<!-- Custom Styles -->
<link rel="stylesheet" href="./styles.css">

<!-- Core JavaScript -->
<script src="./pdfannotate.js"></script>

3. Create a container to hold the PDF viewer.

<div id="pdf-container"></div>

4. Initialize the plugin and load a PDF file into the container.

var pdf = new PDFAnnotate("pdf-container", "pdf.pdf", {
    // options here
});

5. Enable & config the PDF Annotation And Drawing Markup tools.

// enable moving tool
pdf.enableSelector();

// Enable pencil tool
pdf.enablePencil(); 

// Enable comment/note tool
pdf.enableAddText(); 

// Enable arrow tool
pdf.enableAddArrow(); 

// Enable rectangle tool 
pdf.enableRectangle();

// Add an image to the PDF
pdf.addImageToCanvas();

// Delete the selected annotation
pdf.deleteSelectedObject(); 

// Remove all annotations
pdf.clearActivePage(); // Clear current page

// Save the PDF with annotations
pdf.savePdf(); 

// Serialize PDF annotation data
pdf.serializePdf();

// Load annotations from JSON
pdf.loadFromJSON(serializedJSON);

// Set color for tools
pdf.setColor(color);

// Set border color for rectangle tool
pdf.setBorderColor(color);

// Set brush size for pencil tool
pdf.setBrushSize(width);

// Set font size for text tool
pdf.setFontSize(font_size);

// Set border size of rectangles
pdf.setBorderSize(border_size);

6. Available choices and callback features.

var pdf = new PDFAnnotate("pdf-container", "pdf.pdf", {
    onPageUpdated(page, oldData, newData) {
      console.log(page, oldData, newData);
    },
    ready() {
      console.log("Plugin initialized successfully");
    },
    scale: 1.5,
    pageImageCompression: "MEDIUM", // FAST, MEDIUM, SLOW
});

PDF Annotation And Drawing Markup Plugin, PDFJs Annotations Github

See Demo And Download