Skip to content

Commit 870dbc1

Browse files
AnanthaGokulaRamanAnanthaGokulaRaman
authored
Merge pull request #1811 from syncfusion-content/991876-resourcesLoaded
991876 resources loaded
2 parents 79cb2aa + da7778a commit 870dbc1

15 files changed

+612
-2
lines changed

‎Document-Processing-toc.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -268,6 +268,7 @@
268268
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/how-to/print-document">Print the PDF document Programmatically</a></li>
269269
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/how-to/select-multi-page-annotations">Select multi-page TextMarkup annotation as single annotation</a></li>
270270
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/how-to/add-save-button">Add a Save button in the built-in Toolbar</a></li>
271+
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/how-to/load-document-after-resources-loaded">Load document after resources loaded</a></li>
271272
</ul>
272273
</li>
273274
<li>Troubleshooting
@@ -448,6 +449,7 @@
448449
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-mvc/how-to/select-multi-page-annotations">Select multi-page TextMarkup annotation as single annotation</a></li>
449450
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-mvc/how-to/show-bookmark">Show Bookmark</a></li>
450451
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-mvc/how-to/add-save-button">Add a Save button in the built-in Toolbar</a></li>
452+
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-mvc/how-to/load-document-after-resources-loaded">Load document after resources loaded</a></li>
451453
</ul>
452454
</li>
453455
<li>Troubleshooting
@@ -621,6 +623,7 @@
621623
<li><a href="/document-processing/pdf/pdf-viewer/angular/how-to/extract-text">Extract Text</a></li>
622624
<li><a href="/document-processing/pdf/pdf-viewer/angular/how-to/enable-text-selection">Dynamically Enable or Disable Text Selection</a></li>
623625
<li><a href="/document-processing/pdf/pdf-viewer/angular/how-to/show-hide-annotation">Show and Hide Annotations</a></li>
626+
<li><a href="/document-processing/pdf/pdf-viewer/angular/how-to/load-document-after-resources-loaded">Load document after resources loaded</a></li>
624627
</ul>
625628
</li>
626629
<li>Troubleshooting
@@ -951,6 +954,7 @@
951954
<li><a href="/document-processing/pdf/pdf-viewer/react/how-to/extract-text">Extract Text</a></li>
952955
<li><a href="/document-processing/pdf/pdf-viewer/react/how-to/show-hide-annotation">Show and Hide Annotation</a></li>
953956
<li><a href="/document-processing/pdf/pdf-viewer/react/how-to/enable-text-selection">Dynamically Enable or Disable Text Selection</a></li>
957+
<li><a href="/document-processing/pdf/pdf-viewer/react/how-to/load-document-after-resources-loaded">Load document after resources loaded</a></li>
954958
</ul>
955959
</li>
956960
<li>Troubleshooting
@@ -1126,6 +1130,7 @@
11261130
<li><a href="/document-processing/pdf/pdf-viewer/vue/how-to/highlight-underline-strikeout-text">Highlight Underline Strikeout Text</a></li>
11271131
<li><a href="/document-processing/pdf/pdf-viewer/vue/how-to/import-annotations">Import Annotations</a></li>
11281132
<li><a href="/document-processing/pdf/pdf-viewer/vue/how-to/overlapped-annotation">Overlapped Annotation</a></li>
1133+
<li><a href="/document-processing/pdf/pdf-viewer/vue/how-to/load-document-after-resources-loaded">Load document after resources loaded</a></li>
11291134
</ul>
11301135
</li>
11311136
<li>Troubleshooting
@@ -1310,6 +1315,7 @@
13101315
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/how-to/focus-on-a-form-field-after-loading">Focus on a form field on document load</a></li>
13111316
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/how-to/use-local-script-and-style-references">Use local script and style references</a></li>
13121317
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/how-to/add-new-page-to-the-pdf-document">Add new page to PDF document</a></li>
1318+
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/how-to/load-document-after-resources-loaded">Load document after resources Loaded</a></li>
13131319
</ul>
13141320
</li>
13151321
<li>Troubleshooting
@@ -1495,6 +1501,7 @@
14951501
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/how-to/extract-text-ts">Extract Text</a></li>
14961502
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/how-to/enable-text-selection-ts">Dynamically Enable or Disable Text Selection</a></li>
14971503
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/how-to/show-hide-annotation-ts">Show and Hide Annotations</a></li>
1504+
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/how-to/load-document-after-resources-loaded">Load document after resources loaded</a></li>
14981505
</ul>
14991506
</li>
15001507
<li>Troubleshooting

‎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](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples/tree/master/How%20to)
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 life cycle, 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-overview.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,3 +63,4 @@ The frequently asked questions in Essential<sup>&reg;</sup> PDF Viewer are liste
6363
* [How to select annotations in multi page?](./how-to/select-multi-page-annotations)
6464
* [How to get the annotation when it is overlapped with another annotation on its selection?](./how-to/overlapped-annotation)
6565
* [How to print the PDF document silently?](./how-to/print-document)
66+
* [Load Document after resources Loaded](./how-to/load-document-after-resources-loaded)

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

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
---
2+
layout: post
3+
title: Load document after resources Loaded 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+
{% tabs %}
25+
{% highlight cshtml tabtitle="Standalone" %}
26+
27+
@page
28+
@model IndexModel
29+
@{
30+
ViewData["Title"] = "Home page";
31+
}
32+
33+
<div class="text-center">
34+
<ejs-pdfviewer
35+
id="pdfViewer"
36+
style="height:600px; display:block"
37+
resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
38+
resourcesLoaded="onResourcesLoaded">
39+
</ejs-pdfviewer>
40+
</div>
41+
42+
<script>
43+
// Choose one of the following load sources:
44+
var documentUrl = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
45+
var base64 = ''; // put Base64 if you want to load from base64
46+
47+
// Called automatically when the PDF Viewer’s resources (worker/lib) are ready
48+
function onResourcesLoaded(args) {
49+
var viewer = document.getElementById('pdfViewer').ej2_instances[0];
50+
51+
// 1) Load by URL (most common)
52+
viewer.load(documentUrl, '');
53+
54+
// 2) Load by Base64 (uncomment if needed)
55+
// if (base64) {
56+
// viewer.load(base64, '');
57+
// }
58+
}
59+
</script>
60+
61+
{% endhighlight %}
62+
{% endtabs %}
63+
64+
[View Sample in GitHub](https://github.com/SyncfusionExamples/mvc-pdf-viewer-examples/tree/master/How%20to)
65+
66+
## Notes and best practices
67+
68+
- 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.
69+
- Load documents inside resourcesLoaded. This guarantees the PDFium runtime is ready and prevents intermittent errors on slower networks.
70+
- The event fires for the viewer’s asset load life cycle, 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.
71+
72+
## See also
73+
74+
- [Events in ASP.NET Core PDF Viewer](../event#resourcesloaded)
75+
- [Open PDF files](../open-pdf-files)
76+
- [Save PDF files](../save-pdf-files)
77+
- [Getting started](../getting-started)

‎Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to-overview.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,3 +74,4 @@ The frequently asked questions in Essential<sup>&reg;</sup> PDF Viewer are liste
7474
* [How to set Author name for annotation in PDF Viewer?](./how-to/set-author-name-to-annotation)
7575
* [How to Show notification dialog in PDF Viewer?](./how-to/show-notification-dialog)
7676
* [How to set date to the signature in PDF Viewer?](./how-to/signature-date)
77+
* [Load Document after resources Loaded](./how-to/load-document-after-resources-loaded)

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

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
---
2+
layout: post
3+
title: Load document after resources Loaded MVC PDF Viewer | Syncfusion
4+
description: Learn here how to load a PDF only after assets are ready in the Syncfusion ASP.NET MVC 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 MVC 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+
{% tabs %}
25+
{% highlight cshtml tabtitle="Standalone" %}
26+
27+
@{
28+
ViewBag.Title = "Home Page";
29+
}
30+
@Html.EJS().ScriptManager()
31+
<div>
32+
<div style="height:500px;width:100%;">
33+
@Html.EJS().PdfViewer("pdfviewer").ResourceUrl("https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib").Render()
34+
</div>
35+
</div>
36+
37+
<script>
38+
window.onload = function() {
39+
var viewer = (document.getElementById('pdfviewer')).ej2_instances[0];
40+
viewer.resourcesLoaded = function () {
41+
viewer.load(base64, ''); //viewer.load(documnetUrl,'') to load via document Url
42+
}
43+
}
44+
var documentUrl = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
45+
46+
var base64 = 'data:application/pdf;base64,JVBERi0xLjMNCiXi48....'; //Update Base64 here
47+
</script>
48+
49+
{% endhighlight %}
50+
{% endtabs %}
51+
52+
[View Sample in GitHub](https://github.com/SyncfusionExamples/mvc-pdf-viewer-examples/tree/master/How%20to)
53+
54+
## Notes and best practices
55+
56+
- 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.
57+
- Load documents inside resourcesLoaded. This guarantees the PDFium runtime is ready and prevents intermittent errors on slower networks.
58+
- The event fires for the viewer’s asset load life cycle, 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.
59+
60+
## See also
61+
62+
- [Events in ASP.NET MVC PDF Viewer](../event#resourcesloaded)
63+
- [Open PDF files](../open-pdf-files)
64+
- [Save PDF files](../save-pdf-files)
65+
- [Getting started](../getting-started)

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,4 +66,5 @@ The frequently asked questions in Essential<sup>&reg;</sup> PDF Viewer are liste
6666
* [How to get the signature selected and unselected event?](./how-to/signatureselect-signatureunselect-js)
6767
* [How to unload the PDF document from the viewer?](./how-to/unload-document)
6868
* [How to use local script and style references?](./how-to/use-local-script-and-style-references)
69+
* [Load Document after resources Loaded](./how-to/load-document-after-resources-loaded)
6970

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

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
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+
```js
25+
// Initialize the viewer in Standalone mode and point to the assets
26+
var viewer = new ej.pdfviewer.PdfViewer({
27+
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
28+
resourcesLoaded: onResourcesLoaded
29+
});
30+
viewer.appendTo('#pdfViewer');
31+
32+
// Sample sources to demonstrate both URL and Base64 loading
33+
var documentUrl = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
34+
// supply your Base64 here when needed
35+
const base64 = 'data:application/pdf;base64,JVBERi0xLjMNCiXi48..';
36+
// Called when PDFium runtime assets have finished loading
37+
function onResourcesLoaded() {
38+
// Choose ONE of the following load options:
39+
40+
// 1) Load by URL
41+
viewer.load(documentUrl, '');
42+
43+
// 2) Load by Base64 (uncomment if you want to load Base64)
44+
// if (base64) {
45+
// viewer.load(base64, '');
46+
// }
47+
}
48+
```
49+
50+
[View Sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to)
51+
52+
## Notes and best practices
53+
54+
- 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.
55+
- Load documents inside resourcesLoaded. This guarantees the PDFium runtime is ready and prevents intermittent errors on slower networks.
56+
- The event fires for the viewer’s asset load life cycle, 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.
57+
58+
## See also
59+
60+
- [Events in JavaScript PDF Viewer](../event#resourcesloaded)
61+
- [Open PDF files](../open-pdf-files)
62+
- [Save PDF files](../save-pdf-files)
63+
- [Getting started](../getting-started)

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,4 +62,5 @@ The frequently asked questions in Essential<sup>&reg;</sup> PDF Viewer are liste
6262
* [How to show or hide a particular annotation?](./how-to/show-hide-annotation-ts)
6363
* [How to get the signature selected and unselected event?](./how-to/signatureselect-signatureunselect-ts)
6464
* [How to unload the PDF document from the viewer?](./how-to/unload-document)
65+
* [Load Document after resources Loaded](./how-to/load-document-after-resources-loaded)
6566

0 commit comments

Comments
 (0)