Wrapper for PDF JS to Add Annotations | pdfannotate.js

The jQuery online PDF annotation extension allows users to write comments, insert images, leave notes, and draw lines and shapes (such as arrows and rectangles) on a PDF.

PDF.js offers robust annotation features that can be integrated into your application. Here are some key capabilities:

Pre-built Annotations: Users can add various types of annotations such as highlights, shapes, measurements, and more using the JavaScript API.
Custom Annotations: You can create custom annotations tailored to your specific workflow.
Real-time Collaboration: Annotations can be synced in real-time between users and devices, with control over who can add, edit, or delete annotations.
Export and Import: Annotations can be exported to formats like FDF, XFDF, text, or PDF annotation summary, and imported back into the PDF.
Annotation Tools: Tools for creating sticky notes, text markups (highlight, squiggly, underline, strikeout), shapes (line, arrow, rectangle, ellipse), freehand ink, and signatures.
Customizable UI: The annotation tools and styles can be customized to match your application’s branding.

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>
<!-- <a href="https://www.jqueryscript.net/tags.php?/bootstrap 4/">Bootstrap 4</a> -->
<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", {
    onPageUp<a href="https://www.jqueryscript.net/time-clock/">date</a>d(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