Loading & Managing Documents

The PDFViewer includes a robust document-manager 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 config property.


<template>
  <PDFViewer
    :config="{
      documentManager: {
        // Load these files on startup
        initialDocuments: [
          { 
            url: 'https://snippet.embedpdf.com/ebook.pdf',
            autoActivate: true,
            documentId: 'ebook-embedpdf',
          },
          { 
            url: 'https://snippet.embedpdf.com/ebook.pdf',
            autoActivate: false 
          }
        ],
        maxDocuments: 10
      },
      tabBar: 'multiple'
    }"
  />
</template>

Programmatic Loading

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

Loading from URL

Use openDocumentUrl to load remote files.


<script setup lang="ts">
import { ref } from 'vue';
import { PDFViewer, type PluginRegistry } from '@embedpdf/vue-pdf-viewer';
 
const registry = ref<PluginRegistry | null>(null);
 
const handleReady = (r: PluginRegistry) => {
  registry.value = r;
};
 
const openRemotePdf = () => {
  const docManager = registry.value?.getPlugin('document-manager')?.provides();
 
  docManager?.openDocumentUrl({
    url: 'https://snippet.embedpdf.com/ebook.pdf',
    documentId: 'invoice-123',
    autoActivate: true
  });
};
</script>
 
<template>
  <PDFViewer @ready="handleReady" :config="{ src: '/doc.pdf' }" />
</template>

Loading from Buffer (Local Files)

To load a file selected by the user or fetched via a custom API request, use openDocumentBuffer.


<script setup lang="ts">
import { ref } from 'vue';
import { PDFViewer, type PluginRegistry } from '@embedpdf/vue-pdf-viewer';
 
const registry = ref<PluginRegistry | null>(null);
 
const handleReady = (r: PluginRegistry) => {
  registry.value = r;
};
 
const handleFileSelect = async (event: Event) => {
  const target = event.target as HTMLInputElement;
  const file = target.files?.[0];
  if (!file) return;
  
  const buffer = await file.arrayBuffer();
 
  const docManager = registry.value?.getPlugin('document-manager')?.provides();
 
  docManager?.openDocumentBuffer({
    buffer: buffer,
    name: file.name,
    autoActivate: true
  });
};
</script>
 
<template>
  <input type="file" accept=".pdf" @change="handleFileSelect" />
  <PDFViewer @ready="handleReady" :config="{ src: '/doc.pdf' }" />
</template>

Native File Picker

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


<script setup lang="ts">
const openFilePicker = () => {
  const docManager = registry.value?.getPlugin('document-manager')?.provides();
  docManager?.openFileDialog();
};
</script>

Managing Active Documents

You can switch tabs or close documents programmatically.


<script setup lang="ts">
const switchDocument = () => {
  const docManager = registry.value?.getPlugin('document-manager')?.provides();
  docManager?.setActiveDocument('invoice-123');
};
 
const closeDocument = () => {
  const docManager = registry.value?.getPlugin('document-manager')?.provides();
  docManager?.closeDocument('invoice-123');
};
 
const closeAll = () => {
  const docManager = registry.value?.getPlugin('document-manager')?.provides();
  docManager?.closeAllDocuments();
};
</script>

Events

You can listen for document lifecycle events to sync your external UI 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.


<script setup lang="ts">
import { PDFViewer, type PluginRegistry } from '@embedpdf/vue-pdf-viewer';
 
const handleReady = (registry: PluginRegistry) => {
  const docManager = registry.getPlugin('document-manager')?.provides();
 
  docManager?.onDocumentOpened((doc) => {
    console.log(`Opened: ${doc.name} (${doc.id})`);
  });
};
</script>
 
<template>
  <PDFViewer @ready="handleReady" :config="{ src: '/doc.pdf' }" />
</template>