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 (SDK 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  instance.UI.openElements(['comparePanel']);
10
11  UI.addEventListener(UI.Events.MULTI_VIEWER_READY, () => {
12    const [documentViewer1, documentViewer2] = Core.getDocumentViewers();
13    const startCompare = async () => {
14      const shouldCompare = documentViewer1.getDocument() && documentViewer2.getDocument();
15      if (shouldCompare) { // Check if both documents loaded before comparing
16        const beforeColor = new Color(21, 205, 131, 0.4);
17        const afterColor = new Color(255, 73, 73, 0.4);
18        const options = { beforeColor, afterColor };
19        const { doc1Annotations, doc2Annotations, diffCount } = await documentViewer1.startSemanticDiff(documentViewer2, options);
20      }
21    }
22    documentViewer1.addEventListener('documentLoaded', startCompare);
23    documentViewer2.addEventListener('documentLoaded', startCompare);
24    documentViewer1.loadDocument('https://www.pdftron.com/compare1.pdf');
25    documentViewer2.loadDocument('https://www.pdftron.com/compare2.pdf');
26  });
27  UI.enableFeatures([UI.Feature.MultiViewerMode]);
28});

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

See our semantic text compare interactive demo for more information.

See our semantic compare sample for more information.

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales