Compare PDF Changes in Semantic Text Using JavaScript

Requirements

These packages are required to use these features in production. Trial keys have unlimited access to all features

Package: CompareLive demo

Compare changes in semantic categories, such as headers, paragraphs, numbers, and generate a document with a summary of differences for easy review.

Highlighting differences

Using this method you can compare documents and add highlight annotations to mark the differences in side-by-side view.

JavaScript

WebViewer({
  fullAPI: true,
  disableMultiViewerComparison: true, // Disable default compare buttons
}, document.getElementById('viewer'))
.then((instance) => {
  const { UI, Core } = instance;
  const { Annotations } = Core;
  const { Color } = Annotations;
  instance.UI.openElements(['comparePanel']);

  UI.addEventListener(UI.Events.MULTI_VIEWER_READY, () => {
    const [documentViewer1, documentViewer2] = Core.getDocumentViewers();
    const startCompare = async () => {
      const shouldCompare = documentViewer1.getDocument() && documentViewer2.getDocument();
      if (shouldCompare) { // Check if both documents loaded before comparing
        const beforeColor = new Color(21, 205, 131, 0.4);
        const afterColor = new Color(255, 73, 73, 0.4);
        const options = { beforeColor, afterColor };
        const { doc1Annotations, doc2Annotations, diffCount } = await documentViewer1.startSemanticDiff(documentViewer2, options);
      }
    }
    documentViewer1.addEventListener('documentLoaded', startCompare);
    documentViewer2.addEventListener('documentLoaded', startCompare);
    documentViewer1.loadDocument('https://www.pdftron.com/compare1.pdf');
    documentViewer2.loadDocument('https://www.pdftron.com/compare2.pdf');
  });
  UI.enableFeatures([UI.Feature.MultiViewerMode]);
});

Creating a new document with differences

Using this method you can create a new document that has alternating pages from both input documents with highlighted differences

JavaScript

const wvElement = document.getElementById('viewer');
WebViewer({
  fullAPI: true,
}, document.getElementById('viewer'))
.then(async instance => {
  const { documentViewer, PDFNet } = instance.Core;

  await PDFNet.initialize();

  const newDoc = await PDFNet.PDFDoc.create();
  await newDoc.lock();

  const doc1 = await PDFNet.PDFDoc.createFromURL('./files/semantic_test_doc_1.pdf');
  const doc2 = await PDFNet.PDFDoc.createFromURL('./files/semantic_test_doc_2.pdf');
  await newDoc.appendTextDiffDoc(doc1, doc2);

  await newDoc.unlock();

  instance.UI.loadDocument(newDoc);

  // wait until the document has been loaded
  documentViewer.addEventListener('documentLoaded', () => {
    instance.UI.setLayoutMode(instance.UI.LayoutMode.FacingContinuous);
  });
});

TextDiffOptions

See our semantic text compare interactive demo to try it out now, or start coding now with the semantic compare sample.