Section:

View Documents Side-by-side

In WebViewer version 8.9+ you can have two documents loaded side-by-side in the UI.

Apryse Docs Image

To toggle this feature on/off in the WebViewer interface, you can use the following:

JavaScript

1WebViewer({
2  path: '/lib',
3  fullAPI: true,
4}, viewerElement).then(instance => {
5  const { UI } = instance;
6  UI.enableFeatures([UI.Feature.SideBySideView]);
7  UI.disableFeatures([UI.Feature.SideBySideView]);
8});

This will add the option Side By Side View in the View controls dropdown. By clicking the Side By Side View, you can get into Multi-Viewer mode.

Apryse Docs Image

Enter/Exit multi-viewer mode programmatically

You can use the following APIs to enter or exit Multi-Viewer mode:

JavaScript

1WebViewer({
2    path: '/lib',
3    ...
4  })
5  .then((instance) => {
6    const { enterMultiViewerMode, exitMultiViewerMode } = instance.UI;
7
8    enterMultiViewerMode(); // This should create two document viewer in WebViewer.
9    exitMultiViewerMode(); // This should recover to one single document viewer in WebViewer.
10  });

Before WebViewer 10.5, you would need to use enable/disableFeatures but the prefered way going forward is to use the enterMultiViewerMode and exitMultiViewerMode functions shown above.

JavaScript

1// Enter Side by side view
2  instance.UI.enableFeatures(UI.Feature.MultiViewerMode);
3  // Exit Side by side view
4  instance.UI.disableFeatures(UI.Feature.MultiViewerMode);

Compare the differences between two documents

By default, if fullAPI is enabled in the WebViewer constructor and instance.UI.Feature.ComparePages is enabled, MultiViewerMode will come with the 'Start Comparison' button, which when clicked, will highlight all the text differences on the document using annotations.

If you woud like to enable/disable the Show Comparison Button, you can do it with the API below:

JavaScript

1WebViewer({
2    path: '/lib',
3    ...
4  })
5  .then((instance) => {
6    const { UI } = instance;
7
8    UI.enableFeatures([UI.Feature.ComparePages]);
9    UI.disableFeatures([UI.Feature.ComparePages]);
10  });

It will also enable a panel that will list the differences allowing you to search through them. You can also click the items in the panel to be scrolled to the highlighted change on both sides.

Apryse Docs Image

You can also compare the difference between two documents with documentViewer.startSemanticDiff and stop the comparison with documentViewer.stopSemanticDiff.

JavaScript

1WebViewer({
2    path: '/lib',
3    ...
4  }, viewerElement)
5  .then((instance) => {
6    const { getDoucmentViewers } = instance.Core;
7    const { enterMultiViewerMode } = instance.UI;
8
9    instance.UI.addEventListener(UI.Events.MULTI_VIEWER_READY, () => {
10      const [documentViewerOne, documentViewerTwo] = getDocumentViewers();
11
12      // Start comparison and mark the difference
13      documentViewerOne.startSemanticDiff(documentViewerTwo);
14
15      // Disable the comparison
16      documentViewerOne.stopSemanticDiff();
17    }); 
18  });

To disable the comparison functionality, you can pass disableMultiViewerComparison to the WebViewer constructor.

JavaScript

1WebViewer({
2  disableMultiViewerComparison: true,
3  path: '/lib',
4}, viewerElement);

API

In MultiViewerMode you can access the APIs on the second DocumentViewer through the getDocumentViewers() API.
To ensure the second DocumentViewer has been intialized before you call it, you can wrap your code in the MULTI_VIEWER_READY event

JavaScript

1WebViewer({...}, viewerElement).then(function(instance) {
2  const { UI, Core } = instance;
3  UI.addEventListener(UI.Events.MULTI_VIEWER_READY, () => {
4    Core.getDocumentViewers()[0].loadDocument('pdf_vers1.pdf'); // Load 'pdf_vers1.pdf' on first DocumentViewer
5    Core.getDocumentViewers()[1].loadDocument('pdf_vers2.pdf'); // Load 'pdf_vers2.pdf' on second DocumentViewer
6  })
7  UI.enableFeatures([UI.Feature.MultiViewerMode]);
8});

There are also some additional APIs to control the scroll and zoom syncing.

Save Document Button

By default, the save document button is disabled. You can enable this button to allow users to download the document from either side.

JavaScript

1WebViewer({...}, viewerElement).then(function(instance) {
2  const { UI } = instance;
3  UI.enableElements(["multiViewerSaveDocumentButton"]);
4});

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales