Section:

Semantic Text Compare

Requirements
View Demo
Package: 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 to try it out now, or start coding now with the semantic compare sample.

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales