View Documents Side-by-side

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

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

WebViewer({
  path: '/lib',
  fullAPI: true,
}, viewerElement).then(instance => {
  const { UI } = instance;
  UI.enableFeatures([UI.Feature.SideBySideView]);
  UI.disableFeatures([UI.Feature.SideBySideView]);
});

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.

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

WebViewer({
    path: '/lib',
    ...
  })
  .then((instance) => {
    const { enterMultiViewerMode, exitMultiViewerMode } = instance.UI;

    enterMultiViewerMode(); // This should create two document viewer in WebViewer.
    exitMultiViewerMode(); // This should recover to one single document viewer in WebViewer.
  });

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.

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

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:

WebViewer({
    path: '/lib',
    ...
  })
  .then((instance) => {
    const { UI } = instance;

    UI.enableFeatures([UI.Feature.ComparePages]);
    UI.disableFeatures([UI.Feature.ComparePages]);
  });

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.

WebViewer({
    path: '/lib',
    ...
  }, viewerElement)
  .then((instance) => {
    const { getDoucmentViewers } = instance.Core;
    const { enterMultiViewerMode } = instance.UI;

    instance.UI.addEventListener(UI.Events.MULTI_VIEWER_READY, () => {
      const [documentViewerOne, documentViewerTwo] = getDocumentViewers();

      // Start comparison and mark the difference
      documentViewerOne.startSemanticDiff(documentViewerTwo);

      // Disable the comparison
      documentViewerOne.stopSemanticDiff();
    }); 
  });

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

WebViewer({
  disableMultiViewerComparison: true,
  path: '/lib',
}, viewerElement);

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

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

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.

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