Save and Load Annotations with SQLite3 and XFDF, JavaScript

In addition to showing how to add a WebViewer iFrame component to a Vanilla JS client app, this sample expands on annotation functionality by enabling the saving and loading of annotation objects into an SQLite3 database on the server side.

The saving and loading are done through GET and POST HTTP messages that are handled by an AnnotationController in the project. The annotations are stored as XFDF strings embedded in the messages and saved in the server-side database.

WebViewer provides a slick out-of-the-box responsive UI that enables you to view, annotate and manipulate PDFs and other document types inside any web project.

Click the button below to view the full project in GitHub.

index.js

index.js

var viewerElement = document.getElementById('viewer');
var DOCUMENT_ID = 'webviewer-demo-1';

WebViewer.Iframe({
  path: 'lib',
  initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo.pdf',
  documentXFDFRetriever: async () => {
    const rows = await loadxfdfStrings(DOCUMENT_ID);
    return JSON.parse(rows).map(row => row.xfdfString);
  }
}, viewerElement).then(instance => {
  var docViewer = instance.Core.documentViewer;
  var annotManager = docViewer.getAnnotationManager();

  // Save when annotation change event is triggered (adding, modifying or deleting of annotations)
  annotManager.addEventListener('annotationChanged', function(annots, action, options) {
    // If the event is triggered by importing then it can be ignored
    // This will happen when importing the initial annotations from the server or individual changes from other users
    if (options.imported) return;

    annotManager.exportAnnotationCommand().then(function (xfdfStrings) {
      annots.forEach(function(annot) {
        savexfdfString(DOCUMENT_ID, annot.Id, xfdfStrings);
      });
    });
  });
});

// Make a POST request with document ID, annotation ID and XFDF string
var savexfdfString = function(documentId, annotationId, xfdfString) {
  return new Promise(function(resolve) {
    fetch(`/server/annotationHandler.js?documentId=${documentId}`, {
      method: 'POST',
      body: JSON.stringify({
        annotationId,
        xfdfString
      })
    }).then(function(res) {
      if (res.status === 200) {
        resolve();
      }
    });
  });
};

// Make a GET request to get XFDF string
var loadxfdfStrings = function(documentId) {
  return new Promise(function(resolve) {
    fetch(`/server/annotationHandler.js?documentId=${documentId}`, {
      method: 'GET'
    }).then(function(res) {
      if (res.status === 200) {
        res.text().then(function(xfdfStrings) {
          resolve(xfdfStrings);
        });
      }
    });
  });
};

annotationHandler.js

annotationHandler.js

// WARNING: In this sample, the query inputs are not sanitized. For production use, you should use sql builder
// libraries like Knex.js (https://knexjs.org/) to prevent SQL injection.

const fs = require('fs');
const SQLite3 = require('sqlite3').verbose();
const TABLE = 'annotations';

module.exports = (app) => {
  // Create a database if it doesn't exist
  if (!fs.existsSync('server/xfdf.db')) {
    fs.writeFileSync('server/xfdf.db', '');
  }

  // Create annotations table with columns documentId, annotationID and xfdfString
  const db = new SQLite3.Database('server/xfdf.db');
  db.run(`CREATE TABLE IF NOT EXISTS ${TABLE} (documentId TEXT, annotationId TEXT PRIMARY KEY, xfdfString TEXT)`);
  db.close();

  // Handle POST request sent to '/server/annotationHandler.js'
  app.post('/server/annotationHandler.js', (req, res) => {
    const documentId = req.query.documentId;
    const annotationId = JSON.parse(req.body).annotationId;
    const xfdfString = JSON.parse(req.body).xfdfString.replace(/\'/g, `''`); // To escape single quote character in SQLite

    const db = new SQLite3.Database('server/xfdf.db');
    db.serialize(() => {
      const isDeleteCommand = /<delete>(.*)<\/delete>/s.test(xfdfString);

      let query;
      if (isDeleteCommand) {
        // Instead of saving the delete command, we can remove the row from the database
        query = `DELETE FROM ${TABLE} WHERE annotationId = '${annotationId}'`;
      } else {
        // Save document ID, annotation ID and XFDF string to database
        query = `INSERT OR REPLACE INTO ${TABLE} VALUES ('${documentId}', '${annotationId}', '${xfdfString}')`;
      }

      db.run(query, err => {
        if (err) {
          res.status(500);
        } else {
          res.status(200);
        }
        res.end();
      });
    });
    db.close();
  });

  // Handle GET request sent to '/server/annotationHandler.js'
  app.get('/server/annotationHandler.js', (req, res) => {
    const documentId = req.query.documentId;

    const db = new SQLite3.Database('server/xfdf.db');
    // Read from the database and send the rows as a response
    db.all(`SELECT annotationId, xfdfString FROM ${TABLE} WHERE documentId = '${documentId}'`, (err, rows) => {
      if (err) {
        res.status(204);
      } else {
        res.header('Content-Type', 'application/json');
        res.status(200).send(rows);
      }
      res.end();
    });
    db.close();
  });
}

View the full sample on GitHub