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 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

// Enable pencil tool

// Enable comment/note tool

// Enable arrow tool

// Enable rectangle tool 

// Add an image to the PDF

// Delete the selected annotation

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

// Save the PDF with annotations

// Serialize PDF annotation data

// Load annotations from JSON

// Set color for tools

// Set border color for rectangle tool

// Set brush size for pencil tool

// Set font size for text tool

// Set border size of rectangles

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.