Section:

Enable Multi-Tab Document Viewing

Open Multiple Documents in WebViewer

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.

Enabling via Webviewer constructor

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.

JavaScript

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

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

JavaScript

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

Enabling using Webviewer API

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

JavaScript

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

API

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.

JavaScript

1const { UI, Core } = instance
2UI.addEventListener(UI.Events.TAB_MANAGER_READY, async () => {
3  await UI.TabManager.addTab('https://pdftron.s3.amazonaws.com/downloads/pl/form1.pdf', { setActive: true });
4});
5UI.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:

The addTab() method takes in a source to load the document from and the load options. See guide for supported addTab options.

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.

JavaScript

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

Events

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

Below is some sample usage of the TAB_ADDED event.

JavaScript

1WebViewer({
2  path: '/lib',
3}, viewerElement).then(function(instance) {
4  const { UI } = instance;
5  const { Events } = UI;
6  UI.addEventListener(Events.TAB_ADDED, e => {
7    const { detail } = e;
8    console.log(detail.src); // Source of the new tab
9    console.log(detail.options); // Document load options
10  });
11});

IndexedDB

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:

JavaScript

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

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales