From 2144d2ff31c531f462f100752bcdd4fa5d642208 Mon Sep 17 00:00:00 2001
From: SF4524LogeshKumar <logeshkumar.dhamodharan@syncfusion.com>
Date: Thu, 25 Jun 2026 17:09:04 +0530
Subject: [PATCH 1/2] 1035883: Document Handling in Vue PDF Viewer

---
 Document-Processing-toc.html                  |   8 +
 .../vue/document-handling/load-large-pdf.md   | 248 +++++++++++++++
 .../document-handling/load-password-pdf.md    | 102 ++++++
 .../vue/document-handling/preprocess-pdf.md   | 292 +++++++++++++++++
 .../document-handling/retrieve-loadedDoc.md   | 296 ++++++++++++++++++
 5 files changed, 946 insertions(+)
 create mode 100644 Document-Processing/PDF/PDF-Viewer/vue/document-handling/load-large-pdf.md
 create mode 100644 Document-Processing/PDF/PDF-Viewer/vue/document-handling/load-password-pdf.md
 create mode 100644 Document-Processing/PDF/PDF-Viewer/vue/document-handling/preprocess-pdf.md
 create mode 100644 Document-Processing/PDF/PDF-Viewer/vue/document-handling/retrieve-loadedDoc.md

diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html
index 1e6f96bc0b..3c237d993b 100644
--- a/Document-Processing-toc.html
+++ b/Document-Processing-toc.html
@@ -1682,6 +1682,14 @@
 									<li><a href="/document-processing/pdf/pdf-viewer/vue/save-pdf-file/to-azure-active-directory">To Azure Active Directory</a></li>
 								</ul>
 							</li>
+							<li>Document Handling
+								<ul>
+									<li><a href="/document-processing/pdf/pdf-viewer/vue/document-handling/load-large-pdf">Load Large PDF Files</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/vue/document-handling/load-password-pdf">Load Password Protected PDFs</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/vue/document-handling/preprocess-pdf">Preprocess PDF Document Before Displaying</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/vue/document-handling/retrieve-loadedDoc">Retrieve the Loaded Document Instance </a></li>
+								</ul>
+							</li>
 							<li><a href="/document-processing/pdf/pdf-viewer/vue/accessibility">Accessibility</a></li>
 							<li><a href="/document-processing/pdf/pdf-viewer/vue/toolbar">Toolbar Customization</a> 
 							    <ul>
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/document-handling/load-large-pdf.md b/Document-Processing/PDF/PDF-Viewer/vue/document-handling/load-large-pdf.md
new file mode 100644
index 0000000000..d170b66bb8
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/document-handling/load-large-pdf.md
@@ -0,0 +1,248 @@
+---
+layout: post
+title: Document Handling in Vue PDF Viewer component | Syncfusion
+description: This page helps you to learn about how to Open PDF from URL, Base64, Blob, Stream, Cloud storage in Syncfusion Vue PDF Viewer component.
+control: PDF Viewer
+platform: document-processing
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Load Large PDF Files in Vue PDF Viewer
+
+This article explains how to efficiently load and view large PDF files using the Syncfusion Vue PDF Viewer. It includes recommended best practices and performance tips for documents ranging from **50 MB to 2 GB**.
+
+## Why Large PDFs Need Special Handling
+
+Large PDF files often contain thousands of embedded objects such as images, compressed streams, digital signatures, form fields, annotations, vector graphics, and complex page structures. Rendering such heavy documents requires more processing time and memory.
+
+The **Syncfusion PDF Viewer is fully optimized for these heavy workloads**, and it delivers excellent performance even when working with very large files.
+
+### Viewer Capability Highlights
+- **Smooth performance for PDFs up to 1 GB**
+- **Supports viewing files up to ~2 GB**
+- **1 GB PDFs typically load within 5–6 seconds** 
+- **Optimized incremental page loading** for faster interaction
+
+Performance may vary if the user's system is heavily loaded or low on available RAM. In such cases, enabling the recommended optimizations below ensures maximum performance.
+
+## Best Practices for Loading Large PDFs
+
+### 1. Load PDFs Using Blob (Recommended)
+
+Blob loading provides the fastest and most efficient performance for large PDFs.
+
+#### Why Blob Loading Is Better
+
+When a large PDF (for example, 1 GB) is loaded directly via `documentPath` (URL):
+
+- The browser must **download the full document first**
+- Only after the full download completes, the viewer starts parsing and rendering
+- This causes delay for large files
+
+But when the PDF is fetched as a **Blob**:
+
+- The file is downloaded first in an optimized stream
+- A Blob URL is created and passed to the viewer
+- The viewer can begin rendering faster
+- Improves load time, memory usage, and overall responsiveness
+
+#### Example: Load a PDF as Blob
+```js
+fetch('https://your-api/large-file.pdf')
+  .then(response => response.blob())
+  .then(blob => {
+    const blobUrl = URL.createObjectURL(blob);
+    this.$refs.pdfViewer.load(blobUrl, null);
+  })
+  .catch(error => console.error('Error loading PDF:', error));
+```
+
+Blob loading is highly recommended for all PDFs above **200 MB**, especially when working with 500 MB – 1 GB files.
+
+### 2. Viewer Performance Range
+
+The Syncfusion PDF Viewer is optimized to handle:
+
+- **Up to 1 GB** → very smooth
+- **Up to ~2 GB**
+
+This suits enterprise workflows involving large engineering drawings, client records, scanned books, and multi‑page financial reports.
+
+### 3. Minimize Injected Modules
+
+The PDF Viewer internally uses background workers for text processing, thumbnail generation, image rendering, and metadata extraction. Disabling modules that are not needed helps reduce background activity and improves performance.
+
+#### 3.1 Text Search & Text Selection
+
+Modules:
+- [`Text Search`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/text-search)
+- [`Text Selection`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/text-selection)
+
+These features require **continuous background text extraction and indexing**.
+
+For large PDFs:
+
+- Text extraction runs longer
+- Consumes additional CPU and memory
+- Increases initial load time
+
+If these features are not required in your application:
+
+- Disable them to reduce background tasks
+- Improve page rendering speed
+- Provide a smoother experience for large documents
+
+#### 3.2 Thumbnail View & Organize Pages
+
+Modules:
+- [`Organize Pages`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/organize-pages/overview)
+- [`Thumbnail View`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/interactive-pdf-navigation/page-thumbnail)
+
+These rely on **background thumbnail rendering**, where the viewer renders small preview images of every page.
+For PDFs with hundreds or thousands of pages, this becomes heavy.
+
+If thumbnails or page reordering are not essential:
+
+- Disable these modules
+- Prevent background thumbnail rendering
+- Reduce memory usage
+- Improve navigation responsiveness
+
+#### Example (remove unnecessary modules)
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+<template>
+  <div style="height: 100vh">
+    <ejs-pdfviewer
+      ref="pdfViewer"
+      id="pdfViewer"
+      :documentPath="documentPath"
+      :resourceUrl="resourceUrl"
+      style="height: 100%"
+    >
+    </ejs-pdfviewer>
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Print,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: {
+    'ejs-pdfviewer': PdfViewerComponent,
+  },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
+    };
+  },
+  provide: {
+    PdfViewer: [Toolbar, Magnification, Navigation, Print],
+  },
+}
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+### 4. Enable Local Storage for Large PDFs With Many Form Fields or Annotations
+
+PDFs with a high number of:
+
+- Form fields (textbox, dropdown, signatures, etc.)
+- Annotations (highlight, shapes, comments)
+
+require more storage for:
+
+- Field values
+- Annotation metadata
+- Interaction states
+- Undo/redo data
+
+Enabling local storage in the PDF Viewer can improve performance and smoothness when working with large files. This allows the viewer to cache document data locally, reducing repeated network requests and memory spikes.
+
+Use the [`enableLocalStorage`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#enablelocalstorage) property to control this behavior. When set to `true`, session data is stored in memory for the current session; when `false` (default), browser session storage is used.
+
+**How the viewer stores this data by default**
+
+By default, the viewer uses **sessionStorage** to store interactive session data. For heavy PDFs with many form fields/annotations, sessionStorage can get filled more quickly and may cause slower interactions or instability when navigating across many pages.
+
+**Why enabling localStorage helps**
+
+- Provides more storage capacity than session storage
+- Avoids storage overflow for annotation‑heavy PDFs
+- Improves saving/loading of form values
+- Enhances stability when navigating large documents
+- Reduces repeated processing for form/annotation‑heavy pages
+
+#### Enable Local Storage
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+<template>
+  <div style="height: 100vh">
+    <ejs-pdfviewer
+      ref="pdfViewer"
+      id="pdfViewer"
+      :documentPath="documentPath"
+      :resourceUrl="resourceUrl"
+      :enableLocalStorage="true"
+      style="height: 100%"
+    >
+    </ejs-pdfviewer>
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Print,
+  Annotation,
+  FormFields,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: {
+    'ejs-pdfviewer': PdfViewerComponent,
+  },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
+    };
+  },
+  provide: {
+    PdfViewer: [Toolbar, Magnification, Navigation, Print, Annotation, FormFields],
+  },
+}
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+This is highly recommended when working with legal documents, tax forms, interactive applications, or PDFs containing thousands of annotations.
+
+### 5. Reduce Unnecessary Background System Processes
+
+For the best large‑PDF experience:
+
+- Close unused applications
+- Avoid multiple heavy tasks running in parallel
+- Minimize other browser tabs
+- Avoid opening multiple large PDFs simultaneously
+
+This ensures the viewer receives enough system resources.
+
+## See Also
+
+- [Load PDF (GitHub Sample)](https://github.com/SyncfusionExamples/vue-pdf-viewer-examples/tree/master/Save%20and%20Load)
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/document-handling/load-password-pdf.md b/Document-Processing/PDF/PDF-Viewer/vue/document-handling/load-password-pdf.md
new file mode 100644
index 0000000000..41344e56ef
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/document-handling/load-password-pdf.md
@@ -0,0 +1,102 @@
+---
+layout: post
+title: Load Password Protected PDFs in Vue PDF Viewer | Syncfusion
+description: Learn how to open password-protected PDF files in the Syncfusion Vue PDF Viewer by providing the password in the documentPath object.
+control: PDF Viewer
+platform: document-processing
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Load a Password-Protected PDF
+
+This article explains how to open password-protected PDF files in the Syncfusion Vue PDF Viewer. The viewer supports both user‑interactive loading (Open File dialog) and programmatic loading using APIs.
+
+## 1. Opening a Password-Protected PDF Using the **Open File** Dialog
+
+When the user selects a password-protected PDF using the built‑in **Open File** option:
+
+- The viewer detects that the document is encrypted
+
+![Open PDF Document](../../react/images/open-pdf.png)
+
+- A **password input popup** is automatically displayed
+
+![Password Protected Pop-up](../../react/images/password-popup.png)
+
+- The user enters the password
+
+- The document is decrypted and loaded
+
+No additional configuration or code is required.
+
+This approach works for all password-protected PDFs opened locally by the user.
+
+## 2. Opening a Password-Protected PDF Programmatically
+
+If you load a password-protected PDF from a URL or through custom logic, the viewer provides two behaviors depending on how the file is loaded.
+
+### 2.1 Load the Document Using `viewer.load(url, password)`
+
+You can directly pass the password in the [`load`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#load) method:
+
+```js
+this.$refs.pdfViewer.load(
+  'https://your-api/password-protected.pdf',
+  'Password'
+);
+```
+
+- If the password is correct → the PDF loads immediately
+- If the password is incorrect → the viewer displays the incorrect password popup
+- If no password is provided → the password popup is shown automatically
+
+This is useful when the password is known beforehand.
+
+### 2.2 Loading a Password-Protected Document's URL Using `documentPath`
+
+If the [`documentPath`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#documentpath) points to a password-protected PDF:
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+<template>
+  <div style="height: 100vh">
+    <ejs-pdfviewer
+      ref="pdfViewer"
+      id="pdfViewer"
+      :documentPath="documentPath"
+      :resourceUrl="resourceUrl"
+      style="height: 100%"
+    >
+    </ejs-pdfviewer>
+  </div>
+</template>
+
+<script>
+import { PdfViewerComponent } from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: {
+    'ejs-pdfviewer': PdfViewerComponent,
+  },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
+    };
+  },
+}
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+The viewer will:
+
+- Detect encryption
+- Show the **password popup automatically**
+- Allow the user to enter the correct password
+- Then load the PDF
+
+![Password Protected Pop-up](../../react/images/password-popup.png)
+
+N> No password should be passed inside `documentPath`.
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/document-handling/preprocess-pdf.md b/Document-Processing/PDF/PDF-Viewer/vue/document-handling/preprocess-pdf.md
new file mode 100644
index 0000000000..89201408ec
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/document-handling/preprocess-pdf.md
@@ -0,0 +1,292 @@
+---
+layout: post
+title: Preprocess PDF Document in Vue PDF Viewer | Syncfusion
+description: Learn how to preprocess PDF documents using Syncfusion PDF Library before displaying them in the Vue PDF Viewer.
+control: PDF Viewer
+platform: document-processing
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Pre-process PDF Document Before Displaying in Vue PDF Viewer
+
+This section explains why preprocessing is useful, what operations you can perform using the Syncfusion PDF Library, and how to load the processed document in the Vue PDF Viewer.
+
+## Why Preprocessing Is Needed
+Preprocessing a PDF before sending it to the viewer helps you:
+- Reduce file size and improve load time
+- Merge multiple documents into one
+- Extract only required pages for faster loading
+- Flatten form fields and annotations for performance & security
+- Apply branding elements such as watermarks or stamps
+
+These enhancements ensure a better, faster, and more controlled viewing experience.
+
+## Merge PDF Documents
+### UI-Level Merging
+You can visually merge pages in the **Organize Pages** UI inside the PDF Viewer. Users can import another PDF, insert its pages into the current file, reorder pages, or delete unwanted pages.
+
+![Import Pages](../images/import.gif)
+
+### Programmatically Merge PDFs
+Using the Syncfusion PDF Library, you can merge documents before loading them into the viewer.
+```js
+import { PdfDocument } from '@syncfusion/ej2-pdf';
+
+const document1 = await PdfDocument.load('file1.pdf');
+const document2 = await PdfDocument.load('file2.pdf');
+
+document1.merge(document2);
+const mergedBytes = await document1.save();
+```
+You can then load the merged PDF into the viewer using Blob or Base64.
+
+## Extract Pages
+### UI-Level Extraction
+Using the Viewer's [**Organize Pages**](../organize-pages/overview) window, users can select and extract required pages and download them separately.
+
+![Extract Pages](../images/extract-page.png)
+
+### Programmatically Extract Pages
+```js
+import { PdfDocument } from '@syncfusion/ej2-pdf';
+
+const original = await PdfDocument.load('sample.pdf');
+const extracted = original.extractPages([2,3,4]);
+const resultBytes = await extracted.save();
+```
+This reduces file size and improves performance when loading large documents.
+
+## Flatten Form Fields & Annotations
+### Why Flattening Helps
+- Prevents users from editing form fields
+- Improves rendering speed
+- Ensures consistent appearance across all devices
+
+### Programmatic Flattening
+```js
+import { PdfDocument } from '@syncfusion/ej2-pdf';
+
+const doc = await PdfDocument.load('form.pdf');
+doc.formFields.flattenAllFields();
+doc.annotations.flattenAllAnnotations();
+const bytes = await doc.save();
+```
+
+### Flatten on Load
+
+Use the following code-snippet, when you want uploaded PDFs to be flattened before they are loaded into the viewer.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+<template>
+  <div class="control-section">
+    <!-- Native hidden file input (reliable) -->
+    <input
+      ref="fileInput"
+      type="file"
+      accept=".pdf"
+      style="display: none"
+      @change="onFileChange"
+    />
+
+    <!-- PDF Viewer -->
+    <div style="height: 100vh">
+      <ejs-pdfviewer
+        ref="pdfViewer"
+        id="container"
+        :documentPath="documentPath"
+        :resourceUrl="resourceUrl"
+        :enableAnnotation="true"
+        :enableFormFields="true"
+        :toolbarSettings="toolbarSettings"
+        @toolbarClick="toolbarClick"
+        style="height: 100%"
+      >
+      </ejs-pdfviewer>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Annotation,
+  FormFields,
+  Magnification,
+  Navigation,
+  TextSearch,
+  TextSelection,
+  Print,
+  LinkAnnotation,
+  BookmarkView,
+  ThumbnailView,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+import { PdfDocument } from '@syncfusion/ej2-pdf';
+
+export default {
+  name: 'PdfViewerSample',
+
+  components: {
+    'ejs-pdfviewer': PdfViewerComponent,
+  },
+
+  data() {
+    return {
+      // Default file
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/33.2.13/dist/ej2-pdfviewer-lib',
+
+      toolbarSettings: {
+        showTooltip: true,
+        toolbarItems: [
+          {
+            prefixIcon: 'e-icons e-folder',
+            id: 'openPdf',
+            tooltipText: 'Open File',
+            align: 'left',
+          },
+          'PageNavigationTool',
+          'MagnificationTool',
+          'PanTool',
+          'SelectionTool',
+          'SearchOption',
+          'PrintOption',
+          'UndoRedoTool',
+          'AnnotationEditTool',
+          'FormDesignerEditTool',
+          'DownloadOption',
+        ],
+      },
+    };
+  },
+
+  provide: {
+    PdfViewer: [
+      Toolbar,
+      Annotation,
+      FormFields,
+      Magnification,
+      Navigation,
+      TextSearch,
+      TextSelection,
+      Print,
+      LinkAnnotation,
+      BookmarkView,
+      ThumbnailView,
+    ],
+  },
+
+  methods: {
+    // Open File Explorer
+    toolbarClick(args) {
+      if (args.item && args.item.id === 'openPdf') {
+        this.$refs.fileInput.click();
+      }
+    },
+
+    // File selection handling
+    onFileChange(event) {
+      const file = event.target.files[0];
+
+      if (!file || !file.name.toLowerCase().endsWith('.pdf')) {
+        alert('Please select a valid PDF file');
+        return;
+      }
+
+      const reader = new FileReader();
+
+      reader.onload = () => {
+        const base64 = reader.result.split(',')[1];
+
+        // Convert Base64 → Uint8Array
+        const binary = atob(base64);
+        const bytes = new Uint8Array(binary.length);
+
+        for (let i = 0; i < binary.length; i++) {
+          bytes[i] = binary.charCodeAt(i);
+        }
+
+        // Load & flatten PDF
+        const pdfDocument = new PdfDocument(bytes);
+        pdfDocument.flatten = true;
+
+        const flattened = pdfDocument.save();
+
+        // Load into viewer
+        this.$refs.pdfViewer.load(flattened, null);
+      };
+
+      reader.readAsDataURL(file);
+    },
+  },
+};
+</script>
+
+<style>
+.control-section {
+  height: 100%;
+  width: 100%;
+}
+</style>
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Refer to the [Flatten on Download](../annotation/flatten-annotation#how-to-flatten-annotations) section for more information about flattening documents on download.
+
+## Add Watermark or Stamp
+### UI-Level Stamps
+The PDF Viewer toolbar allows users to:
+- Add [standard stamps](../annotation/stamp-annotation#add-stamp-annotations-to-the-pdf-document) (Approved, Draft, etc.)
+- Insert [custom image stamps](../annotation/stamp-annotation#add-a-custom-stamp)
+
+![Custom Stamp](../images/customStamp.png)
+
+### Programmatically Add a Watermark
+```js
+import { PdfDocument, PdfGraphics, PdfBrushes } from '@syncfusion/ej2-pdf';
+
+const doc = await PdfDocument.load('input.pdf');
+const page = doc.getPage(0);
+const g = page.graphics;
+
+g.drawString('CONFIDENTIAL', {
+    x: 150,
+    y: 300,
+    fontSize: 48,
+    brush: PdfBrushes.gray,
+    opacity: 0.3,
+    rotateAngle: 45
+});
+
+const outputBytes = await doc.save();
+```
+
+## How-To Guide: Load the Preprocessed PDF in the Viewer
+You can load the processed PDF using **Blob**, **Base64**, or a **URL**.
+
+### Load Using Blob (Recommended)
+```js
+fetch('/api/processed-pdf')
+  .then(res => res.blob())
+  .then(blob => {
+      const url = URL.createObjectURL(blob);
+      this.$refs.pdfViewer.load(url);
+  });
+```
+Best for large or dynamically processed PDFs.
+
+### Load Using Base64
+```js
+this.$refs.pdfViewer.load('data:application/pdf;base64,BASE64_STRING');
+```
+Use for small files.
+
+### Load Using URL
+```js
+this.$refs.pdfViewer.load('https://yourdomain.com/files/doc.pdf');
+```
+Ideal for stored/static files.
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/document-handling/retrieve-loadedDoc.md b/Document-Processing/PDF/PDF-Viewer/vue/document-handling/retrieve-loadedDoc.md
new file mode 100644
index 0000000000..2616b20dbb
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/document-handling/retrieve-loadedDoc.md
@@ -0,0 +1,296 @@
+---
+layout: post
+title: Retrieve the Loaded Document in Vue PDF Viewer | Syncfusion
+description: Learn how to access the loaded PDF document instance in the Vue PDF Viewer using refs and the documentLoad event.
+platform: document-processing
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Retrieve the Loaded Document Instance in Vue PDF Viewer
+
+This page explains how to access the Vue PDF Viewer instance using a template ref, listen for the [`documentLoad`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#documentload) life-cycle event, and retrieve document information, page details, and metadata—so you can safely invoke viewer APIs after the PDF is loaded.
+
+## Explanation: Why access the loaded document instance?
+
+- The viewer instance (via **template ref**) gives you a stable handle to call APIs such as [`zoom`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/magnification), [`print`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/print), [`download`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/download), and [`navigation`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/navigation).
+- The **document load event** (fires after the PDF is parsed and pages are ready) is the correct moment to read **document information** (title, author, page count, etc.) and **page metrics**, and to trigger post‑load UI logic.
+- Accessing the instance too early (before load completes) may cause null/undefined errors or incomplete information.
+
+## Reference: What you can access/call after load
+
+After the PDF is loaded you can:
+
+- **Read document information**: title, author, subject, keywords (metadata), page count.
+- **Read page details**: total pages, current page, page size(s).
+- **Call Viewer APIs** (typical examples):
+  - **Zoom / Fit**: `zoomTo(125)`; fit to page/width
+  - **Navigation**: go to a specific page
+  - **Interactions**: enable/disable features (based on injected services)
+  - **Export**: `download()`, `print()`
+
+> Always invoke these after the `documentLoad` event fires, or from user actions that occur after load. Guard calls with optional chaining or readiness flags.
+
+## How‑to: Get the instance with a ref and read details on load
+
+Below is a focused snippet showing:
+1) Creating a **template ref** for the viewer,
+2) Wiring the **`documentLoad`** event, and
+3) Reading basic **document info** and **page count**, then calling **viewer APIs** safely.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+<template>
+  <div style="height: 100vh">
+    <ejs-pdfviewer
+      ref="pdfViewer"
+      id="pdfViewer"
+      :documentPath="documentPath"
+      :resourceUrl="resourceUrl"
+      @documentLoad="onDocumentLoad"
+      style="height: 100%"
+    >
+    </ejs-pdfviewer>
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Print,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: {
+    'ejs-pdfviewer': PdfViewerComponent,
+  },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
+    };
+  },
+  provide: {
+    PdfViewer: [Toolbar, Magnification, Navigation, Print],
+  },
+  methods: {
+    onDocumentLoad(args) {
+      // 1) Access the component instance
+      const viewer = this.$refs.pdfViewer;
+      if (!viewer) return;
+
+      // 2) Read loaded document details (shape depends on event payload/version)
+      console.log('documentLoad args:', args);
+
+      // 3) Extract document info
+      const pageCount =
+        (viewer && viewer.pageCount) ||
+        (args && args.pageCount) ||
+        '(unknown)';
+      const documentName = (args && args.documentName) || '(unnamed)';
+      console.log(`Loaded: ${documentName}, pages: ${pageCount}`);
+
+      // 4) Safe API calls after load
+      if (viewer && viewer.magnification) {
+        viewer.magnification.zoomTo(200);
+      }
+      if (viewer && viewer.navigation) {
+        viewer.navigation.goToPage(5);
+      }
+    },
+  },
+}
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+**Notes**
+- The event name is `documentLoad` (the callback receives load args).
+- The exact event args and public methods available on the component may vary with the package version and injected services. Use `console.log(args)` once to see what's present in your build.
+- Always guard calls with optional chaining (e.g., `viewer?.magnification?.zoomTo(125)`).
+
+## Tutorial: End‑to‑End — Read metadata & call APIs after load
+
+This example demonstrates a complete flow:
+- Setting up a **template ref**
+- Subscribing to `documentLoad`
+- Extracting **metadata** and **pages**
+- Exposing **buttons** to call viewer APIs only after load
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+<template>
+  <div>
+    <div style="margin-bottom: 12px">
+      <strong>Status:</strong> {{ ready ? 'Document loaded' : 'Loading…' }}
+      <br />
+      <div v-if="ready">
+        <div>File: {{ docInfo.name || '(unknown)' }}</div>
+        <div>
+          Pages:
+          {{ docInfo.pageCount != null ? docInfo.pageCount : '(unknown)' }}
+        </div>
+        <div>Author: {{ docInfo.author || '(n/a)' }}</div>
+        <div>Title: {{ docInfo.title || '(n/a)' }}</div>
+      </div>
+    </div>
+
+    <div style="display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap">
+      <button @click="zoomTo(100)" :disabled="!ready">Zoom 100%</button>
+      <button @click="zoomTo(150)" :disabled="!ready">Zoom 150%</button>
+      <button @click="goTo(1)" :disabled="!ready">Go to Page 1</button>
+      <button @click="goTo(5)" :disabled="!ready">Go to Page 5</button>
+      <button @click="printDoc" :disabled="!ready">Print</button>
+      <button @click="downloadDoc" :disabled="!ready">Download</button>
+    </div>
+
+    <div style="height: 80vh">
+      <ejs-pdfviewer
+        ref="pdfViewer"
+        id="pdfViewer"
+        :documentPath="documentPath"
+        :resourceUrl="resourceUrl"
+        @documentLoad="handleDocumentLoad"
+        style="height: 100%; width: 100%"
+      >
+      </ejs-pdfviewer>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Print,
+  TextSelection,
+  TextSearch,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: {
+    'ejs-pdfviewer': PdfViewerComponent,
+  },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
+      resourceUrl:
+        'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
+      ready: false,
+      docInfo: {
+        name: '',
+        pageCount: undefined,
+        author: '',
+        title: '',
+      },
+    };
+  },
+  provide: {
+    PdfViewer: [
+      Toolbar,
+      Magnification,
+      Navigation,
+      Print,
+      TextSelection,
+      TextSearch,
+    ],
+  },
+  methods: {
+    handleDocumentLoad(args) {
+      const viewer = this.$refs.pdfViewer.ej2Instances;
+      if (!viewer) return;
+
+      console.log('documentLoad args:', args);
+
+      this.docInfo = {
+        name: args && args.documentName,
+        pageCount: (viewer && viewer.pageCount) || (args && args.pageCount),
+        author:
+          args && args.documentInformation && args.documentInformation.author,
+        title:
+          args && args.documentInformation && args.documentInformation.title,
+      };
+
+      // Defer just a tick to ensure layout/modules ready before calling APIs
+      this.$nextTick(() => {
+        try {
+          if (viewer && viewer.magnification && viewer.magnification.zoomTo) {
+            viewer.magnification.zoomTo(150); // default zoom after load
+          }
+          if (viewer && viewer.navigation && viewer.navigation.goToPage) {
+            const targetPage = 1; // keep within bounds if you want to guard
+            if (
+              !this.docInfo.pageCount ||
+              targetPage <= this.docInfo.pageCount
+            ) {
+              viewer.navigation.goToPage(targetPage);
+            }
+          }
+        } catch (e) {
+          console.warn('Post-load actions failed:', e);
+        } finally {
+          this.ready = true;
+        }
+      });
+    },
+
+    // ---- UI action handlers (module APIs) ----
+    zoomTo(percent) {
+      const viewer = this.$refs.pdfViewer.ej2Instances;
+      try {
+        if (viewer && viewer.magnification && viewer.magnification.zoomTo) {
+          viewer.magnification.zoomTo(percent);
+        }
+      } catch (e) {
+        console.warn('zoomTo failed:', e);
+      }
+    },
+
+    goTo(page) {
+      const viewer = this.$refs.pdfViewer.ej2Instances;
+      try {
+        if (viewer && viewer.navigation && viewer.navigation.goToPage) {
+          viewer.navigation.goToPage(page);
+        }
+      } catch (e) {
+        console.warn('goToPage failed:', e);
+      }
+    },
+
+    printDoc() {
+      const viewer = this.$refs.pdfViewer.ej2Instances;
+      try {
+        if (viewer && viewer.print && viewer.print.print) {
+          viewer.print.print();
+        }
+      } catch (e) {
+        console.warn('print failed:', e);
+      }
+    },
+
+    downloadDoc() {
+      const viewer = this.$refs.pdfViewer.ej2Instances;
+      try {
+        if (viewer && viewer.download) {
+          viewer.download();
+        }
+      } catch (e) {
+        console.warn('download failed:', e);
+      }
+    },
+  },
+};
+</script>
+
+{% endhighlight %}
+{% endtabs %}
+
+## See also
+- Vue PDF Viewer – [API Reference](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default) ([methods](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#methods), [events](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#events), [properties](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#properties))
+- Events: [`documentLoad`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#documentload) and related argument shape (check your package version)
+- [Modules and Services](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/feature-module) (e.g., Magnification, Navigation, Print) — ensure the features you call are injected

From 9573af5162aa108f8995cc996e3fc9b02b23c4a7 Mon Sep 17 00:00:00 2001
From: SF4524LogeshKumar <logeshkumar.dhamodharan@syncfusion.com>
Date: Thu, 25 Jun 2026 17:38:11 +0530
Subject: [PATCH 2/2] 1035883: Resolved CI Failures

---
 .../PDF/PDF-Viewer/vue/document-handling/load-large-pdf.md      | 2 +-
 .../PDF/PDF-Viewer/vue/document-handling/load-password-pdf.md   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/Document-Processing/PDF/PDF-Viewer/vue/document-handling/load-large-pdf.md b/Document-Processing/PDF/PDF-Viewer/vue/document-handling/load-large-pdf.md
index d170b66bb8..f39c3d809c 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/document-handling/load-large-pdf.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/document-handling/load-large-pdf.md
@@ -77,7 +77,7 @@ The PDF Viewer internally uses background workers for text processing, thumbnail
 
 Modules:
 - [`Text Search`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/text-search)
-- [`Text Selection`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/text-selection)
+- [`Text Selection`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/textSelection)
 
 These features require **continuous background text extraction and indexing**.
 
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/document-handling/load-password-pdf.md b/Document-Processing/PDF/PDF-Viewer/vue/document-handling/load-password-pdf.md
index 41344e56ef..5d9e35400c 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/document-handling/load-password-pdf.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/document-handling/load-password-pdf.md
@@ -8,7 +8,7 @@ documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Load a Password-Protected PDF
+# Load a Password-Protected PDF in Vue
 
 This article explains how to open password-protected PDF files in the Syncfusion Vue PDF Viewer. The viewer supports both user‑interactive loading (Open File dialog) and programmatic loading using APIs.