Loading & Managing Documents

The Snippet includes a robust document-manager plugin that handles file loading, error states, and tab management. While the viewer provides a built-in “Open File” button, you often need to trigger these actions from your own application logic—for example, loading a file when a user clicks a link in your dashboard.

Configuration

You can configure initial documents and limits via the documentManager property.


const viewer = EmbedPDF.init({
  // ...
  documentManager: {
    // Load these files on startup
    initialDocuments: [
      { 
        url: 'https://snippet.embedpdf.com/ebook.pdf',
        // By default, autoActivate is true. 
        // This document will open and become active.
        autoActivate: true,
        // OPTIONAL: Set a custom ID so you can easily reference
        // this document later (e.g. to scroll or close it).
        documentId: 'ebook-embedpdf',
      },
      { 
        url: 'https://snippet.embedpdf.com/ebook.pdf',
        // If we don't set this to false, this document would
        // steal focus immediately after loading!
        autoActivate: false 
      }
    ],
    // Limit total open tabs (older ones may be closed)
    maxDocuments: 10
  },
  // Show the built-in tab bar if you want tabs inside the viewer
  tabBar: 'multiple' // 'always', 'multiple' (default), or 'never'
});

Programmatic Loading

You can control document loading using the document-manager plugin API.

Upload Local

Loading from URL

Use openDocumentUrl to load remote files.


const registry = await viewer.registry;
const docManager = registry.getPlugin('document-manager').provides();
 
docManager.openDocumentUrl({
  url: 'https://snippet.embedpdf.com/ebook.pdf',
  documentId: 'invoice-123', // Optional: fixed ID for easy reference
  autoActivate: true         // Switch tab to this document immediately
});

Loading from Buffer (Local Files)

To load a file selected by the user (via <input type="file">) or fetched via a custom API request, use openDocumentBuffer. This accepts a raw ArrayBuffer.


// Example: Handling a file input change
async function handleFileSelect(event) {
  const file = event.target.files[0];
  const buffer = await file.arrayBuffer();
 
  const registry = await viewer.registry;
  const docManager = registry.getPlugin('document-manager').provides();
 
  docManager.openDocumentBuffer({
    buffer: buffer,
    name: file.name, // Display name for the tab
    autoActivate: true
  });
}

Native File Picker

You can also trigger the browser’s native file picker dialog directly through the viewer API.


docManager.openFileDialog();

Managing Active Documents

You can switch tabs or close documents programmatically.


// Switch to a specific document
docManager.setActiveDocument('invoice-123');
 
// Close a specific document
docManager.closeDocument('invoice-123');
 
// Close all documents
docManager.closeAllDocuments();

Events

You can listen for document lifecycle events to sync your external UI (like a sidebar list) with the viewer state.

Event	Payload	Description
`onDocumentOpened`	`DocumentState`	Fired when a document successfully loads.
`onDocumentClosed`	`documentId`	Fired when a document tab is closed.
`onActiveDocumentChanged`	`{ previous, current }`	Fired when the user switches tabs.
`onDocumentError`	`{ documentId, error }`	Fired if a document fails to load (e.g. 404, corrupt PDF).


docManager.onDocumentOpened((doc) => {
  console.log(`Opened: ${doc.name} (${doc.id})`);
});