991876: Updated UG Documentation for Resources Loaded

Author: SF4524LogeshKumar

Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/load-document-after-resources-loaded.md

@@ -21,42 +21,47 @@ The resourcesLoaded event fires once the viewer finishes loading all required PD
 - Set the resourceUrl to a valid PDF Viewer assets path (CDN or your hosted path).
 - Listen to resourcesLoaded and call load inside the handler.
 
-```cshtml
-@addTagHelper *, Syncfusion.EJ2
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
 
-<!-- Index.cshtml -->
-<div class="control-section">
+@page
+@model IndexModel
+@{
+    ViewData["Title"] = "Home page";
+}
+
+<div class="text-center">
     <ejs-pdfviewer
         id="pdfViewer"
+        style="height:600px; display:block"
         resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
-        resourcesLoaded="onResourcesLoaded"
-        style="height: 640px; display: block">
+        resourcesLoaded="onResourcesLoaded">
     </ejs-pdfviewer>
 </div>
 
 <script>
-  // Sample sources to demonstrate both URL and Base64 loading
+  // Choose one of the following load sources:
   var documentUrl = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
-  var base64 = '';// supply your Base64 here when needed
+  var base64 = ''; // put Base64 if you want to load from base64
 
-  // Called by the resourcesLoaded event
+  // Called automatically when the PDF Viewer’s resources (worker/lib) are ready
   function onResourcesLoaded(args) {
     var viewer = document.getElementById('pdfViewer').ej2_instances[0];
 
-    // Choose ONE of the following load options:
-
-    // 1) Load by URL
-    viewer.load(documentUrl, null);
+    // 1) Load by URL (most common)
+    viewer.load(documentUrl, '');
 
-    // 2) Load by Base64 (uncomment if you want to load Base64)
+    // 2) Load by Base64 (uncomment if needed)
     // if (base64) {
-    //   viewer.load('data:application/pdf;base64,' + base64, null);
+    //   viewer.load(base64, '');
     // }
   }
 </script>
-```
 
-[View Sample in GitHub]()
+{% endhighlight %}
+{% endtabs %}
+
+[View Sample in GitHub](https://github.com/SyncfusionExamples/mvc-pdf-viewer-examples/tree/master/How%20to)
 
 ## Notes and best practices
 
@@ -66,7 +71,7 @@ The resourcesLoaded event fires once the viewer finishes loading all required PD
 
 ## See also
 
-- [Events in ASP.NET Core PDF Viewer](../events/#resourcesloaded)
+- [Events in ASP.NET Core PDF Viewer](../event/#resourcesloaded)
 - [Open PDF files](../open-pdf-files)
 - [Save PDF files](../save-pdf-files)
 - [Getting started](../getting-started)

Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/load-document-after-resources-loaded.md

@@ -0,0 +1,70 @@
+---
+layout: post
+title: Load document after resources Loaded ASP.NET MVC PDF Viewer | Syncfusion
+description: Learn here how to load a PDF only after assets are ready in the Syncfusion ASP.NET Core PDF Viewer (Standalone) using the resourcesLoaded event.
+platform: document-processing
+control: PDF Viewer 
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Load a PDF only after PDFium resources are ready
+
+In Standalone mode, the ASP.NET Core PDF Viewer downloads its PDFium runtime assets (scripts/wasm) from the location specified in the resourceUrl property. Attempting to load a document before those assets are available can cause errors. Use the resourcesLoaded event to defer document loading until all required assets are ready.
+
+## When does resourcesLoaded trigger?
+
+The resourcesLoaded event fires once the viewer finishes loading all required PDFium assets. At this point, it is safe to call the load method to open a document (by URL or Base64).
+
+## How to Load Document after resourcesLoaded
+
+- Set the resourceUrl to a valid PDF Viewer assets path (CDN or your hosted path).
+- Listen to resourcesLoaded and call load inside the handler.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+@using Syncfusion.EJ2
+@{
+    ViewBag.Title = "Home Page";
+}
+
+<div class="control-section">
+    @Html.EJS().PdfViewer("pdfViewer")
+        .ResourceUrl("https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib")
+        .ResourcesLoaded("onResourcesLoaded")
+        .Render()
+</div>
+
+<script>
+  var documentUrl = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+  var base64 = 'data:application/pdf;base64,JVBERi0xLjMNCiXi48...'; //Update Base64 here
+
+  function onResourcesLoaded(args) {
+    var viewer = document.getElementById('pdfViewer').ej2_instances[0];
+
+    // Load by URL
+    viewer.load(documentUrl, '');
+
+    // Or Base64
+    // if (base64) {
+    //   viewer.load('data:application/pdf;base64,' + base64, '');
+    // }
+  }
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+[View Sample in GitHub](https://github.com/SyncfusionExamples/mvc-pdf-viewer-examples/tree/master/How%20to)
+
+## Notes and best practices
+
+- Always set a valid resourceUrl when using the Standalone PDF Viewer. If the path is incorrect or blocked by the network, the event cannot fire.
+- Load documents inside resourcesLoaded. This guarantees the PDFium runtime is ready and prevents intermittent errors on slower networks.
+- The event fires for the viewer’s asset load lifecycle, not for every document load. After it fires once, you can safely call load again later (for example, in response to user actions) without waiting for the event.
+
+## See also
+
+- [Events in ASP.NET MVC PDF Viewer](../event/#resourcesloaded)
+- [Open PDF files](../open-pdf-files)
+- [Save PDF files](../save-pdf-files)
+- [Getting started](../getting-started)

Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/load-document-after-resources-loaded.md

@@ -21,41 +21,33 @@ The resourcesLoaded event fires once the viewer finishes loading all required PD
 - Set the resourceUrl to a valid PDF Viewer assets path (CDN or your hosted path).
 - Listen to resourcesLoaded and call load inside the handler.
 
-```html
-<!-- index.html (snippet) -->
-<link href="https://cdn.syncfusion.com/ej2/31.2.2/material.css" rel="stylesheet">
-<script src="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2.min.js"></script>
-
-<div id="pdfViewer" style="height: 640px; display: block"></div>
-
-<script>
-  // Initialize the viewer in Standalone mode and point to the assets
-  var viewer = new ej.pdfviewer.PdfViewer({
-    resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
-    resourcesLoaded: onResourcesLoaded
-  });
-  viewer.appendTo('#pdfViewer');
-
-  // Sample sources to demonstrate both URL and Base64 loading
-  var documentUrl = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
-  var base64 = '';// supply your Base64 here when needed
-
-  // Called when PDFium runtime assets have finished loading
-  function onResourcesLoaded(args) {
-    // Choose ONE of the following load options:
-
-    // 1) Load by URL
-    viewer.load(documentUrl, null);
-
-    // 2) Load by Base64 (uncomment if you want to load Base64)
-    // if (base64) {
-    //   viewer.load('data:application/pdf;base64,' + base64, null);
-    // }
-  }
-</script>
+```js
+// Initialize the viewer in Standalone mode and point to the assets
+var viewer = new ej.pdfviewer.PdfViewer({
+  resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
+  resourcesLoaded: onResourcesLoaded
+});
+viewer.appendTo('#pdfViewer');
+
+// Sample sources to demonstrate both URL and Base64 loading
+var documentUrl = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+// supply your Base64 here when needed
+const base64 = 'data:application/pdf;base64,JVBERi0xLjMNCiXi48..';
+// Called when PDFium runtime assets have finished loading
+function onResourcesLoaded() {
+  // Choose ONE of the following load options:
+
+  // 1) Load by URL
+  viewer.load(documentUrl, '');
+
+  // 2) Load by Base64 (uncomment if you want to load Base64)
+  // if (base64) {
+  //   viewer.load(base64, '');
+  // }
+}
 ```
 
-[View Sample in GitHub]()
+[View Sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to)
 
 ## Notes and best practices
 
@@ -65,7 +57,7 @@ The resourcesLoaded event fires once the viewer finishes loading all required PD
 
 ## See also
 
-- [Events in JavaScript PDF Viewer](../events/#resourcesloaded)
+- [Events in JavaScript PDF Viewer](../event/#resourcesloaded)
 - [Open PDF files](../open-pdf-files)
 - [Save PDF files](../save-pdf-files)
 - [Getting started](../getting-started)

Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/load-document-after-resources-loaded.md

@@ -21,40 +21,36 @@ The resourcesLoaded event fires once the viewer finishes loading all required PD
 - Set the resourceUrl to a valid PDF Viewer assets path (CDN or your hosted path).
 - Listen to resourcesLoaded and call load inside the handler.
 
-```html
-<!-- index.html (snippet) -->
-<link href="https://cdn.syncfusion.com/ej2/31.2.2/material.css" rel="stylesheet">
-<div id="pdfViewer" style="height: 640px; display: block"></div>
-<script type="module">
-  import { PdfViewer } from '@syncfusion/ej2-pdfviewer';
-
-  // Initialize the viewer in Standalone mode and point to the assets
-  const viewer = new PdfViewer({
-    resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
-    resourcesLoaded: onResourcesLoaded
-  });
-  viewer.appendTo('#pdfViewer');
+```ts
+import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageInfoModel } from '@syncfusion/ej2-pdfviewer';
+
+// Inject required modules
+PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields);
 
-  // Sample sources to demonstrate both URL and Base64 loading
+const viewer: PdfViewer = new PdfViewer({
+    resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib",
+    resourcesLoaded: onResourcesLoaded
+});
+viewer.appendTo('#PdfViewer');
+ // Sample sources to demonstrate both URL and Base64 loading
   const documentUrl = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
-  const base64 = '';// supply your Base64 here when needed
+  const base64 ='data:application/pdf;base64,JVBERi0xLjMNCiX...';// supply your Base64 here when needed
 
   // Called when PDFium runtime assets have finished loading
-  function onResourcesLoaded(args) {
+  function onResourcesLoaded() {
     // Choose ONE of the following load options:
 
     // 1) Load by URL
-    viewer.load(documentUrl, null);
+    viewer.load(documentUrl, '');
 
     // 2) Load by Base64 (uncomment if you want to load Base64)
     // if (base64) {
-    //   viewer.load(`data:application/pdf;base64,${base64}`, null);
+    //   viewer.load(base64, '');
     // }
   }
-</script>
 ```
 
-[View Sample in GitHub]()
+[View Sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master/How%20to)
 
 ## Notes and best practices
 
@@ -64,7 +60,7 @@ The resourcesLoaded event fires once the viewer finishes loading all required PD
 
 ## See also
 
-- [Events in JavaScript PDF Viewer](../events/#resourcesloaded)
+- [Events in JavaScript PDF Viewer](../event/#resourcesloaded)
 - [Open PDF files](../open-pdf-files)
 - [Save PDF files](../save-pdf-files)
 - [Getting started](../getting-started)

Document-Processing/PDF/PDF-Viewer/react/how-to/load-document-after-resources-loaded.md

@@ -21,24 +21,46 @@ The resourcesLoaded event fires once the viewer finishes loading all required PD
 - Set the resourceUrl to a valid PDF Viewer assets path (CDN or your hosted path).
 - Listen to resourcesLoaded and call load inside the handler.
 
-```tsx
-// App.tsx
+```js
+//index.js
 import React, { useRef, useCallback } from 'react';
-import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
-
-export default function App() {
-  const viewerRef = useRef<PdfViewerComponent>(null);
+import { createRoot } from 'react-dom/client';
+import './index.css';
+
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  LinkAnnotation,
+  ThumbnailView,
+  BookmarkView,
+  TextSelection,
+  Annotation,
+  FormDesigner,
+  FormFields,
+  PageOrganizer,
+  Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+  const viewerRef = useRef(null);
 
   const onResourcesLoaded = useCallback(() => {
     // Choose ONE of the following load options:
 
-    // 1) Load by URL
-    viewerRef.current?.load('https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', '');
+    // 1) Load by URL (recommended for your case)
+    viewerRef.current?.load(
+      'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
+      ''
+    );
+
+    // 2) Load by Base64 (uncomment if needed)
+    // supply your Base64 string
+    // const base64 ='data:application/pdf;base64,JVBERi0xLjMNCiXi48...';
 
-    // 2) Load by Base64 (uncomment if you want to load Base64)
-    // const base64 = '';// supply your Base64 here when needed
     // if (base64) {
-    //   viewerRef.current?.load(`data:application/pdf;base64,${base64}`, '');
+    //   viewerRef.current?.load(base64, '');
     // }
   }, []);
 
@@ -51,14 +73,33 @@ export default function App() {
         resourcesLoaded={onResourcesLoaded}
         style={{ display: 'block', height: '100%' }}
       >
-        <Inject services={[Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer]} />
+        <Inject
+          services={[
+            Toolbar,
+            Magnification,
+            Navigation,
+            LinkAnnotation,
+            ThumbnailView,
+            BookmarkView,
+            TextSelection,
+            Annotation,
+            FormDesigner,
+            FormFields,
+            PageOrganizer
+          ]}
+        />
       </PdfViewerComponent>
     </div>
   );
 }
+
+// Mount (make sure you have <div id="sample"></div> in index.html)
+const container = document.getElementById('sample');
+const root = createRoot(container);
+root.render(<App />);
 ```
 
-[View Sample in GitHub]()
+[View Sample in GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/How%20to)
 
 ## Notes and best practices