View and edit documents side-by-side in Apryse WebViewer SDK

In WebViewer version 8.9+ you can view two documents loaded side-by-side in the UI to use to compare documents.

Starting with WebViewer 11.12, you also have full editing capabilities while in MultiViewer (side-by-side) mode, transforming it from a comparison-focused tool into a fully interactive, side-by-side workspace. MultiViewer now includes the complete set of WebViewer PDF editing tools across all supported file types.

With editing, you can:

• Edit multiple documents directly within a single view.
• Set permissions independently across each viewer.
• Apply changes to PDFs, images, Microsoft Office documents, and more.
• Work with each document independently or simultaneously, consistent with standard WebViewer interactions.

These enhancements streamline key multi-document workflows by enabling you to review, compare, and edit content without switching contexts. Editing no longer interrupts comparisons, and you gain efficiency by remaining in a single workspace.

In MultiViewer mode, the WebViewer header and toolbar are shared between both document viewers. This lets you select a tool once and use it seamlessly across both viewers at the same time.

If you Apryse WebViewer version 10.4 or earlier, you'll use enable/disableFeatures to enter or exit MultiViewer. To toggle this feature on/off in the WebViewer interface, use the following code:

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

This will add the option Compare Pages in the View controls dropdown menu. By clicking the Compare Pages, you can enter MultiViewer mode.

If you use Apryse WebViewer version 10.5+, you must use enterMultiViewerMode and exitMultiViewerMode APIs to enter/exit MultiViewer instead of enable/disableFeatures, like the following:

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  });

This will add the option Compare Pages in the View controls dropdown menu. By clicking the Compare Pages, you can enter MultiViewer mode.

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 would like to enable/disable the Show Comparison Button, you can do it with the API below:

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.

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

1WebViewer({
2    path: '/lib',
3    ...
4  }, viewerElement)
5  .then((instance) => {
6    instance.UI.enterMultiViewerMode();
7
8    const { getDocumentViewers } = instance.Core;
9  
10    const [documentViewerOne, documentViewerTwo] = getDocumentViewers();
11  
12    documentViewerTwo.loadDocument('./demo-annotated-2.pdf');
13  
14    documentViewerOne.addEventListener('documentLoaded', () => {
15      // Start comparison and mark the difference
16      documentViewerOne.startSemanticDiff(documentViewerTwo);
17  
18      // Disable the comparison
19      documentViewerOne.stopSemanticDiff();
20    });
21    
22    documentViewerOne.loadDocument('./demo-annotated-1.pdf');
23  });

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

disableMultiViewerComparison Option

The disableMultiViewerComparison constructor option was meant to disable the 'Start Comparison' button in WebViewer's legacy UI. Starting in WebViewer 11+, this button no longer exists.

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

In MultiViewer mode you can access the APIs on the second DocumentViewer through the getDocumentViewers() API.

To ensure the second DocumentViewer has been initialized before you call it, you can wrap your code in the MULTI_VIEWER_READY event:

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.

• enableMultiViewerSync()
• disableMultiViewerSync()
• isMultiViewerSyncing()

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

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

Starting in WebViewer 11.12, you can set the active document viewer key programmatically using the setActiveDocumentViewerKey API. You can also retrieve the active document viewer key using the getActiveDocumentViewerKey API.

1WebViewer({...}, viewerElement).then(function(instance) {
2  const { UI } = instance;
3  
4  // set the active document viewer key to 2
5  UI.setActiveDocumentViewerKey(2);
6  
7  // get the active document viewer key
8  const activeKey = UI.getActiveDocumentViewerKey();
9  console.log(activeKey);
10});