Some test text!

Loading...
Guides
Multi-Tab

Multi-Tab

Multiple Tabs 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+
To enable Multi-tab mode, pass in an array of 2 or more documents to the WebViewer constructor.
To declare extensions for these documents, you must provide an array of extensions to the WebViewer constructor.
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 feature toggle. (v8.4+)

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

API

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 Add tab method takes in a source to load the document from and the load options. The options supported are the same as UI.loadDocument().
It also takes in 2 additional options for immediately loading the tab, and saving the state of the current tab.
When load is set to true, the tab will be loaded immediately after creation.
When saveCurrent is set to true (only applicable with load=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
  load: true, // Defaults to true
  saveCurrent: false, // Defaults to true
};
instance.UI.TabManager.addTab("https://demo.pdftron.com/file1.pdf", options).then(function(newTabId) {
  console.log(newTabId);
});

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.

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
  });
});

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:

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

Get the answers you need: Support

Upcoming Webinar: SDK Features Preview and Live Run-Through | July 14, 2022 at 11 am PT

PDFTron SDK

The Platform

NEW

© 2022 PDFTron Systems Inc. All rights reserved.

Privacy

Terms of Use