Enable Multi-Tab Document Viewing

In WebViewer version 8.3+ you can open multiple tabs in WebViewer.
The API, feature toggle, and Events are available in version 8.4+

There are two ways to enable Multi-tab mode. Passing an array of 2 or more documents to the WebViewer constructor in the initialDoc property or using the enableFeatures API.

When creating a new instance of WebViewer, the initialDoc property needs to be set with the list of documents to be opened in the tabs.

To declare extensions for these documents, you must provide an array of extensions to the WebViewer constructor via extension property. The array of extensions must be the same length as the array of documents, with the indexes corresponding to the indexes of the documents in initialDoc.

WebViewer({
  initialDoc: ["pdf_doc.pdf", "doc_doc.docx"],
  extension: ["pdf", "docx"],
  path: '/lib',
}, viewerElement);

If all the documents passed to the constructor are the same type, you can pass in a single string to the extension array.

WebViewer({
  initialDoc: ["pdf_doc.pdf", "pdf_doc2.pdf", "pdf_doc3.pdf"],
  extension: ["pdf"],
  path: '/lib',
}, viewerElement);

To enable/disable Multi-tab mode without the constructor, you can use the WebViewer API with the enableFeatures function. (v8.4+)

WebViewer({
  path: '/lib',
}, viewerElement).then(function(instance) {
  instance.UI.enableFeatures([instance.UI.Feature.MultiTab]);
});

To interact with the API you can wrap your TabManger code around the onTabManagerReadyEvent. (v10.1+)
This will ensure that the TabManger has been initialized before any calls are made.

const { UI, Core } = instance
UI.addEventListener(UI.Events.TAB_MANAGER_READY, async () => {
  await UI.TabManager.addTab('https://pdftron.s3.amazonaws.com/downloads/pl/form1.pdf', { setActive: true });
});
UI.enableFeatures(['MultiTab']);

The multi-tab api is available through the TabManager class. (v8.4+)
Using this API you can open new tabs, close tabs, and switch between tabs programmatically. Here are the available methods:

• addTab()
• deleteTab()
• getActiveTab()
• getAllTabs()
• setActiveTab()

The addTab() method takes in a source to load the document from and the load options. The options supported are listed here.

When setActive is set to true, the tab will be loaded immediately after creation.
When saveCurrentActiveTabState is set to true (only applicable with setActive=true), the current tab's state will be saved prior to loading the new tab.

let options = {
  extension: 'pdf',
  filename: 'file1.pdf', // Used as the name of the tab
  setActive: true, // Defaults to true
  saveCurrentActiveTabState: false, // Defaults to true
};
instance.UI.TabManager.addTab("https://demo.apryse.com/file1.pdf", options).then(function(newTabId) {
  console.log(newTabId);
});

You can also listen for events when tabs are modified using the UI namespace event listeners.
Here are the relevant events:

• UI.Events.BEFORE_TAB_CHANGED
• UI.Events.TAB_DELETED
• UI.Events.TAB_ADDED
• UI.Events.TAB_MOVED

Below is some sample usage of the TAB_ADDED event.

WebViewer({
  path: '/lib',
}, viewerElement).then(function(instance) {
  const { UI } = instance;
  const { Events } = UI;
  UI.addEventListener(Events.TAB_ADDED, e => {
    const { detail } = e;
    console.log(detail.src); // Source of the new tab
    console.log(detail.options); // Document load options
  });
});

Multi-tab mode will use the browsers built in IndexedDB to save the state of the tabs. If your browser does not support IndexedDB, you will not be able to save the tab state when switching tabs. To disable the usage of IndexedDB you can pass in true to the disableIndexedDB option in the WebViewer constructor:

WebViewer({
  path: '/lib',
  disableIndexedDB: true, // Defaults to false
}, viewerElement);