Wrapper for PDF JS to Add Annotations | pdfannotate.js

PDF-JS-Annotations

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 highlight annotation, pdf-annotate.js examples, javascript pdf annotation open source, pdf.js example, pdf annotation jquery plugin, pdf viewer in javascript

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

Official Website(RavishaHesh): Click Here

This superior jQuery/javascript plugin is developed by RavishaHesh. For extra Advanced Usages, please go to the official website.