Some test text!

menu
Migrating to v7keyboard_arrow_down

Migrating to V7 of WebViewer

There are a few breaking changes and other changes when migrating to v7 from older versions.

linkBreaking changes

linkNew default UI

There is a new default user interface in WebViewer 7.0 which has changed the location and structure of some components in the UI. Most APIs will function the same as before.

One of the main changes is to the header toolbars which are split into several groups. You can change the group using setToolbarGroup and you can edit each group using the getHeader function.

WebViewer(...)
  .then(instance => {
    // adds a button to the shapes header
    instance.setHeaderItems(header => {
      const shapesHeader = header.getHeader('toolbarGroup-Shapes');
      shapesHeader.push({
        type: 'actionButton',
        img: '...',
        onClick: () => {
          // perform action
        }
      });
    });
  });

If you want to hide a specific toolbar group, like other DOM elements, they can be hidden by using disableElements.

WebViewer(...)
  .then(instance => {
    // hide the Shapes, Edit and Insert toolbar groups.
    instance.disableElements(['toolbarGroup-Shapes']);
    instance.disableElements(['toolbarGroup-Edit']);
    instance.disableElements(['toolbarGroup-Insert']);
  });

If you are not ready to update to the new UI yet you can still access the previous UI by passing ui: 'legacy' into your WebViewer constructor.

WebViewer({
  ui: 'legacy',
  // other constructor options
}).then(instance => {

});

linkPage numbers instead of page indexes for APIs

Several breaking changes have been made to make sure API signatures are more consistent in WebViewer 7.0. We've heard feedback that it can be confusing using some WebViewer APIs because some accept page indexes (starting with zero) and some accept page numbers (starting with one). In 7.0 we've updated all APIs to be page numbers (starting with one) to be consistent.

Generally if you were using APIs on AnnotationManager and DocumentViewer these were already taking in 1-indexed page numbers. If you were using APIs on the Document object these were taking in 0-indexed page numbers.

Below are some examples of the changes:

WebViewer(...)
  .then(instance => {
    instance.docViewer.on('documentLoaded', () => {
      const doc = instance.docViewer.getDocument();
      // get the information of the first page
      const pageNumber = 1;
      const pageInfo = doc.getPageInfo(pageNumber);
    });
  });

The following APIs have been changed to use page numbers:

WebViewer(...)
  .then(instance => {
    instance.docViewer.on('pageComplete', (pageNumber, canvas) => {
      ...
    });
  });
WebViewer(...)
  .then(instance => {
    instance.docViewer.on('textSelected', (quads, text, pageNumber) => {
      ...
    });
  });
WebViewer(...)
  .then(instance => {
    const { TextTool } = instance.Tools;

    TextTool.prototype.textSelected = function(pageNumber, quads, text) {
      ...
    }
  });
WebViewer(...)
  .then(instance => {
    const displayMode = instance.docViewer.getDisplayModeManager().getDisplayMode();
    const windowPoint = { ... };

    const page = displayMode.getSelectedPages(windowPoint, windowPoint);
    const firstPageNumber = page.first;
    const lastPageNumber = page.last;
  });
WebViewer(...)
  .then(instance => {
    const tool = instance.docViewer.getToolMode();

    console.log(tool.pageCoordinates[0].pageNumber);
  });
WebViewer(...)
  .then(instance => {
    instance.docViewer.on('documentLoaded', () => {
      docViewer.textSearchInit(searchText, mode, {
        onResult: result => {
          // pageNum is 1-indexed
          console.log(result.pageNum);
        },
      });
    });
  });

The following DOM elements have been changed to use page numbers:

  • #pageContainer
  • #pageWidgetContainer
WebViewer(...)
  .then(instance => {
    instance.docViewer.on('documentLoaded', () => {
      const iframeDocument = instance.iframeWindow.document;
      const firstWidgetContainer = iframeDocument.querySelector('#pageWidgetContainer1');
    })
  });

linkPartRetrievers cannot be accessed directly

Previously you could reference a PartRetriever directly from the PartRetriever namespace. Now the PartRetrievers are lazy loaded when needed so you can access them through the asynchronous getPartRetriever API.

WebViewer(...)
  .then(async (instance) => {
    const { PartRetrievers } = instance.CoreControls;
    const options = {};

    const partRetriever = await PartRetrievers.getPartRetriever(PartRetrievers.TYPES.ExternalPdfPartRetriever, 'YOUR_FILE_PATH', options)
  });

linkResultCode has been moved to the CoreControls namespace

The XODText namespace has been removed from the iframe window, and ResultCode belongs to the CoreControls namespace now.

WebViewer(...)
  .then(instance => {
    instance.docViewer.textSearchInit(searchText, mode, {
      onResult: result => {
        const { ResultCode } = instance.CoreControls.Search;
        if (result.resultCode === ResultCode.FOUND) {
          ...
        }
      },
    });
  });

linkDeprecated usages

In WebViewer 7.0, we also renamed some constant variables to be more consistent with others. Their previous names are kept for backwards compatibility, though we still encourage you to update them.

WebViewer(...)
  .then(instance => {
    console.log(instance.docViewer.SnapMode.DEFAULT);
  });
WebViewer(...)
  .then(instance => {
    instance.docViewer.on('documentLoaded', () => {
      docViewer.textSearchInit(searchText, mode, {
        onResult: result => {
          const {
            ambientStr,
            resultStr,
            resultStrStart,
            resultStrEnd,
            pageNum,
            resultCode,
            quads,
          } = result;
        },
      });
    });
  });
WebViewer(...)
  .then(instance => {
    instance.docViewer.on('documentLoaded', () => {
      const { Mode } = instance.CoreControls.Search;
      const searchMode = Mode.PAGE_STOP | Mode.HIGHLIGHT | ...;
      instance.docViewer.textSearchInit(searchText, searchMode, ...);
    });
  });
WebViewer(...)
  .then(instance => {
    console.log(instance.CoreControls.PageRotation.E_0);
  });

linkAPIs removed

A few very rarely used APIs have been removed related to CanvasManager canvas modes.

CoreControls.CanvasMode
CoreControls.setCanvasMode
DocumentViewer.setPagesPerCanvas
DocumentViewer.returnCanvas

linkOther

The fileAttachmentDataAvailable event is now fired on AnnotationManager instead of DocumentViewer.

Get the answers you need: Support

close

Free Trial

Get unlimited trial usage of PDFTron SDK to bring accurate, reliable, and fast document processing capabilities to any application or workflow.

Select a platform to get started with your free trial.

Unlimited usage. No email address required.

Join our live demo to learn about use cases & capabilities for WebViewer

Learn more
close