Section:

Semantic Text Compare

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.

Apryse Docs Image

JavaScript (v8.0+)

1WebViewer({
2  fullAPI: true,
3  disableMultiViewerComparison: true, // Disable default compare buttons
4}, document.getElementById('viewer'))
5.then((instance) => {
6  const { UI, Core } = instance;
7  const { Annotations } = Core;
8  const { Color } = Annotations;
9
10  UI.addEventListener(UI.Events.MULTI_VIEWER_READY, () => {
11    const [documentViewer1, documentViewer2] = Core.getDocumentViewers();
12    const startCompare = async () => {
13      const shouldCompare = documentViewer1.getDocument() && documentViewer2.getDocument();
14      if (shouldCompare) { // Check if both documents loaded before comparing
15        const beforeColor = new Color(21, 205, 131, 0.4);
16        const afterColor = new Color(255, 73, 73, 0.4);
17        const options = { beforeColor, afterColor };
18        const { doc1Annotations, doc2Annotations, diffCount } = await documentViewer1.startSemanticDiff(documentViewer2, options);
19      }
20    }
21    documentViewer1.addEventListener('documentLoaded', startCompare);
22    documentViewer2.addEventListener('documentLoaded', startCompare);
23    documentViewer1.loadDocument('https://www.pdftron.com/compare1.pdf');
24    documentViewer2.loadDocument('https://www.pdftron.com/compare2.pdf');
25  });
26  UI.enableFeatures([UI.Feature.MultiViewerMode]);
27});

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 (v8.0+)

1const wvElement = document.getElementById('viewer');
2WebViewer({
3  fullAPI: true,
4}, document.getElementById('viewer'))
5.then(async instance => {
6  const { documentViewer, PDFNet } = instance.Core;
7
8  await PDFNet.initialize();
9
10  const newDoc = await PDFNet.PDFDoc.create();
11  await newDoc.lock();
12
13  const doc1 = await PDFNet.PDFDoc.createFromURL('./files/semantic_test_doc_1.pdf');
14  const doc2 = await PDFNet.PDFDoc.createFromURL('./files/semantic_test_doc_2.pdf');
15  await newDoc.appendTextDiffDoc(doc1, doc2);
16
17  await newDoc.unlock();
18
19  instance.UI.loadDocument(newDoc);
20
21  // wait until the document has been loaded
22  documentViewer.addEventListener('documentLoaded', () => {
23    instance.UI.setLayoutMode(instance.UI.LayoutMode.FacingContinuous);
24  });
25});

Related Links

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales