Skip to content

Commit 35aebdb

Browse files
SF4524LogeshKumarSF4524LogeshKumar
committed
991876: Resource Loaded UG documentation
1 parent c8af150 commit 35aebdb

File tree

8 files changed

+473
-1
lines changed

8 files changed

+473
-1
lines changed

‎Document-Processing/PDF/PDF-Viewer/angular/how-to-overview.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,4 +57,5 @@ The frequently asked questions in Essential<sup>&reg;</sup> PDF Viewer are liste
5757
* [Find Text using findTextAsync Method](./how-to/find-text-async)
5858
* [Extract Text](./how-to/extract-text)
5959
* [Dynamically Enable or Disable Text Selection](./how-to/enable-text-selection)
60-
* [Show and Hide Annotations](./how-to/show-hide-annotation)
60+
* [Show and Hide Annotations](./how-to/show-hide-annotation)
61+
* [Load Document after resources Loaded](./how-to/load-document-after-resources-loaded)

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

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
---
2+
layout: post
3+
title: Load document after resources Loaded Angular PDF Viewer | Syncfusion
4+
description: Learn here all about how to Load document after loading assets in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more.
5+
platform: document-processing
6+
control: PDF Viewer
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Load a PDF only after PDFium resources are ready
12+
13+
In Standalone mode, the Angular PDF Viewer downloads its PDFium runtime assets (scripts/wasm) from the location specified in `resourceUrl`. 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.
14+
15+
## When does resourcesLoaded trigger?
16+
17+
The `resourcesLoaded` event fires once the viewer finishes loading all required PDFium assets. At this point, it is safe to call the [`load`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#load) method to open a document (by URL or Base64).
18+
19+
## How to Load Document after resourcesLoaded
20+
21+
- Set the `resourceUrl` to a valid PDF Viewer assets path (CDN or your hosted path).
22+
- Listen to `(resourcesLoaded)` and call `load` inside the handler.
23+
24+
```html
25+
<!-- app.component.html -->
26+
<ejs-pdfviewer
27+
#pdfViewer
28+
id="pdfViewer"
29+
[resourceUrl]="resourceUrl"
30+
(resourcesLoaded)="resourcesLoaded()"
31+
style="height: 640px; display: block"
32+
>
33+
</ejs-pdfviewer>
34+
```
35+
36+
```ts
37+
// app.component.ts
38+
import { Component, ViewChild } from '@angular/core';
39+
import { PdfViewerComponent, ToolbarService, MagnificationService, NavigationService, LinkAnnotationService, ThumbnailViewService, BookmarkViewService, TextSelectionService, AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer';
40+
41+
@Component({
42+
selector: 'app-root',
43+
templateUrl: './app.component.html',
44+
providers: [
45+
ToolbarService,
46+
MagnificationService,
47+
NavigationService,
48+
LinkAnnotationService,
49+
ThumbnailViewService,
50+
BookmarkViewService,
51+
TextSelectionService,
52+
AnnotationService,
53+
FormDesignerService,
54+
FormFieldsService,
55+
PageOrganizerService
56+
],
57+
styleUrls: ['app.component.css'],
58+
standalone: true,
59+
imports: [PdfViewerModule],
60+
})
61+
export class AppComponent {
62+
@ViewChild('pdfViewer')
63+
public pdfViewer!: PdfViewerComponent;
64+
65+
// Point to the PDF Viewer assets (scripts/wasm) location
66+
public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
67+
68+
// Sample sources to demonstrate both URL and Base64 loading
69+
public documentUrl = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
70+
public base64: string = '';// supply your Base64 here when needed
71+
72+
// Called by the (resourcesLoaded) event
73+
public resourcesLoaded(): void {
74+
// Choose ONE of the following load options:
75+
76+
// 1) Load by URL
77+
this.pdfViewer.load(this.documentUrl, "");
78+
79+
// 2) Load by Base64 (uncomment if you want to load Base64)
80+
// if (this.base64) {
81+
// this.pdfViewer.load(`data:application/pdf;base64,${this.base64}`, "");
82+
// }
83+
}
84+
}
85+
```
86+
87+
[View Sample in GitHub]()
88+
89+
## Notes and best practices
90+
91+
- 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.
92+
- Load documents inside `resourcesLoaded`. This guarantees the PDFium runtime is ready and prevents intermittent errors on slower networks.
93+
- 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.
94+
95+
## See also
96+
97+
- [Events in Angular PDF Viewer](../events/#resourcesloaded)
98+
- [Open PDF files](../open-pdf-files)
99+
- [Save PDF files](../save-pdf-files)
100+
- [Getting started](../getting-started)

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

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
---
2+
layout: post
3+
title: Load document after resources Loaded ASP.NET Core PDF Viewer | Syncfusion
4+
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.
5+
platform: document-processing
6+
control: PDF Viewer
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Load a PDF only after PDFium resources are ready
12+
13+
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.
14+
15+
## When does resourcesLoaded trigger?
16+
17+
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).
18+
19+
## How to Load Document after resourcesLoaded
20+
21+
- Set the resourceUrl to a valid PDF Viewer assets path (CDN or your hosted path).
22+
- Listen to resourcesLoaded and call load inside the handler.
23+
24+
```cshtml
25+
@addTagHelper *, Syncfusion.EJ2
26+
27+
<!-- Index.cshtml -->
28+
<div class="control-section">
29+
<ejs-pdfviewer
30+
id="pdfViewer"
31+
resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
32+
resourcesLoaded="onResourcesLoaded"
33+
style="height: 640px; display: block">
34+
</ejs-pdfviewer>
35+
</div>
36+
37+
<script>
38+
// Sample sources to demonstrate both URL and Base64 loading
39+
var documentUrl = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
40+
var base64 = '';// supply your Base64 here when needed
41+
42+
// Called by the resourcesLoaded event
43+
function onResourcesLoaded(args) {
44+
var viewer = document.getElementById('pdfViewer').ej2_instances[0];
45+
46+
// Choose ONE of the following load options:
47+
48+
// 1) Load by URL
49+
viewer.load(documentUrl, null);
50+
51+
// 2) Load by Base64 (uncomment if you want to load Base64)
52+
// if (base64) {
53+
// viewer.load('data:application/pdf;base64,' + base64, null);
54+
// }
55+
}
56+
</script>
57+
```
58+
59+
[View Sample in GitHub]()
60+
61+
## Notes and best practices
62+
63+
- 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.
64+
- Load documents inside resourcesLoaded. This guarantees the PDFium runtime is ready and prevents intermittent errors on slower networks.
65+
- 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.
66+
67+
## See also
68+
69+
- [Events in ASP.NET Core PDF Viewer](../events/#resourcesloaded)
70+
- [Open PDF files](../open-pdf-files)
71+
- [Save PDF files](../save-pdf-files)
72+
- [Getting started](../getting-started)

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

Whitespace-only changes.

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

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
---
2+
layout: post
3+
title: Load document after resources Loaded JS(ES5) PDF Viewer | Syncfusion
4+
description: Learn here all about how to load document after loading assets in Syncfusion JavaScript (ES5) PDF Viewer component of Syncfusion Essential JS 2 and more.
5+
platform: document-processing
6+
control: PDF Viewer
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Load a PDF only after PDFium resources are ready
12+
13+
In Standalone mode, the JavaScript (ES5) PDF Viewer downloads its PDFium runtime assets (scripts/wasm) from the location specified in resourceUrl. 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.
14+
15+
## When does resourcesLoaded trigger?
16+
17+
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).
18+
19+
## How to Load Document after resourcesLoaded
20+
21+
- Set the resourceUrl to a valid PDF Viewer assets path (CDN or your hosted path).
22+
- Listen to resourcesLoaded and call load inside the handler.
23+
24+
```html
25+
<!-- index.html (snippet) -->
26+
<link href="https://cdn.syncfusion.com/ej2/31.2.2/material.css" rel="stylesheet">
27+
<script src="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2.min.js"></script>
28+
29+
<div id="pdfViewer" style="height: 640px; display: block"></div>
30+
31+
<script>
32+
// Initialize the viewer in Standalone mode and point to the assets
33+
var viewer = new ej.pdfviewer.PdfViewer({
34+
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
35+
resourcesLoaded: onResourcesLoaded
36+
});
37+
viewer.appendTo('#pdfViewer');
38+
39+
// Sample sources to demonstrate both URL and Base64 loading
40+
var documentUrl = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
41+
var base64 = '';// supply your Base64 here when needed
42+
43+
// Called when PDFium runtime assets have finished loading
44+
function onResourcesLoaded(args) {
45+
// Choose ONE of the following load options:
46+
47+
// 1) Load by URL
48+
viewer.load(documentUrl, null);
49+
50+
// 2) Load by Base64 (uncomment if you want to load Base64)
51+
// if (base64) {
52+
// viewer.load('data:application/pdf;base64,' + base64, null);
53+
// }
54+
}
55+
</script>
56+
```
57+
58+
[View Sample in GitHub]()
59+
60+
## Notes and best practices
61+
62+
- 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.
63+
- Load documents inside resourcesLoaded. This guarantees the PDFium runtime is ready and prevents intermittent errors on slower networks.
64+
- 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.
65+
66+
## See also
67+
68+
- [Events in JavaScript PDF Viewer](../events/#resourcesloaded)
69+
- [Open PDF files](../open-pdf-files)
70+
- [Save PDF files](../save-pdf-files)
71+
- [Getting started](../getting-started)

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

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
---
2+
layout: post
3+
title: Load document after resources Loaded JS(ES6) PDF Viewer | Syncfusion
4+
description: Learn how to load a PDF only after assets are ready in the Syncfusion JavaScript (ES6) PDF Viewer (Standalone) using the resourcesLoaded event.
5+
platform: document-processing
6+
control: PDF Viewer
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Load a PDF only after PDFium resources are ready
12+
13+
In Standalone mode, the JavaScript (ES6) PDF Viewer downloads its PDFium runtime assets (scripts/wasm) from the location specified in resourceUrl. 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.
14+
15+
## When does resourcesLoaded trigger?
16+
17+
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).
18+
19+
## How to Load Document after resourcesLoaded
20+
21+
- Set the resourceUrl to a valid PDF Viewer assets path (CDN or your hosted path).
22+
- Listen to resourcesLoaded and call load inside the handler.
23+
24+
```html
25+
<!-- index.html (snippet) -->
26+
<link href="https://cdn.syncfusion.com/ej2/31.2.2/material.css" rel="stylesheet">
27+
<div id="pdfViewer" style="height: 640px; display: block"></div>
28+
<script type="module">
29+
import { PdfViewer } from '@syncfusion/ej2-pdfviewer';
30+
31+
// Initialize the viewer in Standalone mode and point to the assets
32+
const viewer = new PdfViewer({
33+
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
34+
resourcesLoaded: onResourcesLoaded
35+
});
36+
viewer.appendTo('#pdfViewer');
37+
38+
// Sample sources to demonstrate both URL and Base64 loading
39+
const documentUrl = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
40+
const base64 = '';// supply your Base64 here when needed
41+
42+
// Called when PDFium runtime assets have finished loading
43+
function onResourcesLoaded(args) {
44+
// Choose ONE of the following load options:
45+
46+
// 1) Load by URL
47+
viewer.load(documentUrl, null);
48+
49+
// 2) Load by Base64 (uncomment if you want to load Base64)
50+
// if (base64) {
51+
// viewer.load(`data:application/pdf;base64,${base64}`, null);
52+
// }
53+
}
54+
</script>
55+
```
56+
57+
[View Sample in GitHub]()
58+
59+
## Notes and best practices
60+
61+
- 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.
62+
- Load documents inside resourcesLoaded. This guarantees the PDFium runtime is ready and prevents intermittent errors on slower networks.
63+
- 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.
64+
65+
## See also
66+
67+
- [Events in JavaScript PDF Viewer](../events/#resourcesloaded)
68+
- [Open PDF files](../open-pdf-files)
69+
- [Save PDF files](../save-pdf-files)
70+
- [Getting started](../getting-started)

0 commit comments

Comments
 (0)