Some test text!

Loading...
Guides
Side-by-side Compare

Side-by-side Compare

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

To toggle this feature on/off you can use the feature toggle:

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

By default, if fullAPI is enabled in the WebViewer constructor, MultiViewerMode will come with the 'Start Comparison' button, which when clicked, will highlight all the text differences on the document using annotations.
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.

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

WebViewer({
  disableMultiViewerComparison: true,
  path: '/lib',
}, 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

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.

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.

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

Get the answers you need: Support

Upcoming Webinar: Customer Experience and Retaining Control: Boosting Document Automation and Efficiency in Financial Services | Sept 15, 2022 at 11 am PT

PDFTron SDK

The Platform

NEW

© 2022 PDFTron Systems Inc. All rights reserved.

Privacy

Terms of Use