Skip to content

Commit a007941

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 809d85c commit a007941

File tree

1 file changed

+57
-58
lines changed

1 file changed

+57
-58
lines changed

‎docs-aspnet/knowledge-base/pdfviewer-pdfjs-script-workarounds.md‎

Lines changed: 57 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -64,14 +64,69 @@ However, adding the scripts without `type="module"` is also not an option becaus
6464

6565
Apply any of the following approaches when using {{ site.product }} PDFViewer (version 2024.4.1112 or later):
6666

67+
- [Using RenderAsModule option for module-based script initialization](#using-renderasmodule-for-module-based-script-initialization)
6768
- [Loading Kendo UI scripts twice](#loading-kendo-ui-scripts-twice)
6869
- [Loading only the required PDFViewer scripts](#loading-only-the-required-pdfviewer-scripts)
69-
- [Using RenderAsModule option for module-based script initialization](#using-renderasmodule-for-module-based-script-initialization)
7070
- [Compiling the PDF.js scripts to UMD modules](#compiling-pdfjs-scripts-to-umd-modules)
7171

72+
### Using RenderAsModule for Module-Based Script Initialization
73+
74+
The recommended solution is to include the required Kendo UI scripts as modules and enable the `RenderAsModule` option, which will add `type="module"` to the initialization scripts of all Telerik UI components in the application.
75+
76+
Also, it is important to ensure that `type="module"` is added to all script tags that contain custom logic related to the Telerik UI components.
77+
78+
{% if site.core %}
79+
```Program.cs
80+
builder.Services.AddKendo(x => x.RenderAsModule = true);
81+
```
82+
{% else %}
83+
```Global.asax
84+
KendoMvc.Setup(options =>
85+
{
86+
options.RenderAsModule = true;
87+
});
88+
```
89+
{% endif %}
90+
```_Layout
91+
<link href="https://kendo.cdn.telerik.com/themes/10.0.1/default/default-ocean-blue.css" rel="stylesheet" type="text/css" />
92+
<script src="https://code.jquery.com/jquery-3.7.1.min.js" type="module"></script>
93+
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.8.69/pdf.mjs" type="module"></script>
94+
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.8.69/pdf.worker.mjs" type="module"></script>
95+
<script src="https://cdn.kendostatic.com/2024.4.1112/js/kendo.all.min.js" type="module"></script>
96+
<script src="https://cdn.kendostatic.com/2024.4.1112/js/kendo.aspnetmvc.min.js" type="module"></script>
97+
```
98+
```HtmlHelper
99+
@(Html.Kendo().PDFViewer()
100+
.Name("pdfviewer")
101+
.PdfjsProcessing(pdf => pdf.File(""))
102+
.Height(800)
103+
)
104+
105+
<script type="module">
106+
$(document).ready(() => {
107+
var pdfviewer = $('#pdfviewer').data('kendoPdfViewer');
108+
console.log(pdfviewer);
109+
})
110+
</script>
111+
```
112+
{% if site.core %}
113+
```TagHelper
114+
<kendo-pdfviewer name="pdfviewer" height="800">
115+
<pdfjs-processing file="@Url.Content("")" />
116+
</kendo-pdfviewer>
117+
118+
<script type="module">
119+
$(document).ready(() => {
120+
var pdfviewer = $('#pdfviewer').data('kendoPdfViewer');
121+
console.log(pdfviewer);
122+
})
123+
</script>
124+
```
125+
{% endif %}
126+
72127
### Loading Kendo UI Scripts Twice
73128

74-
The easiest workaround is to include the Kendo UI scripts twice—with and without `type="module"`:
129+
Another workaround is to include the Kendo UI scripts twice—with and without `type="module"`:
75130

76131
```HtmlHelper
77132
<link href="https://kendo.cdn.telerik.com/themes/10.0.1/default/default-ocean-blue.css" rel="stylesheet" type="text/css" />
@@ -157,62 +212,6 @@ Instead of loading the whole "kendo.all.min.js" script file twice, you can inclu
157212
```
158213
{% endif %}
159214

160-
### Using RenderAsModule for Module-Based Script Initialization
161-
162-
Another solution is to include the required Kendo UI scripts as modules and enable the `RenderAsModule` option, which will add `type="module"` to the initialization scripts of all Telerik UI components in the application.
163-
164-
Also, it is important to ensure that `type="module"` is added to all script tags that contain custom logic related to the Telerik UI components.
165-
166-
{% if site.core %}
167-
```Program.cs
168-
builder.Services.AddKendo(x => x.RenderAsModule = true);
169-
```
170-
{% else %}
171-
```Global.asax
172-
KendoMvc.Setup(options =>
173-
{
174-
options.RenderAsModule = true;
175-
});
176-
```
177-
{% endif %}
178-
```_Layout
179-
<link href="https://kendo.cdn.telerik.com/themes/10.0.1/default/default-ocean-blue.css" rel="stylesheet" type="text/css" />
180-
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
181-
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.8.69/pdf.mjs" type="module"></script>
182-
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.8.69/pdf.worker.mjs" type="module"></script>
183-
<script src="https://cdn.kendostatic.com/2024.4.1112/js/kendo.all.min.js" type="module"></script>
184-
<script src="https://cdn.kendostatic.com/2024.4.1112/js/kendo.aspnetmvc.min.js" type="module"></script>
185-
```
186-
```HtmlHelper
187-
@(Html.Kendo().PDFViewer()
188-
.Name("pdfviewer")
189-
.PdfjsProcessing(pdf => pdf.File(""))
190-
.Height(800)
191-
)
192-
193-
<script type="module">
194-
$(document).ready(() => {
195-
var pdfviewer = $('#pdfviewer').data('kendoPdfViewer');
196-
console.log(pdfviewer);
197-
})
198-
</script>
199-
```
200-
{% if site.core %}
201-
```TagHelper
202-
<kendo-pdfviewer name="pdfviewer" height="800">
203-
<pdfjs-processing file="@Url.Content("")" />
204-
</kendo-pdfviewer>
205-
206-
<script type="module">
207-
$(document).ready(() => {
208-
var pdfviewer = $('#pdfviewer').data('kendoPdfViewer');
209-
console.log(pdfviewer);
210-
})
211-
</script>
212-
```
213-
{% endif %}
214-
215-
216215
### Compiling PDF.js Scripts to UMD Modules
217216

218217
Theoretically, you can download the PDF.js scripts and use a JS bundler tool like [webpack](https://webpack.js.org/) to compile them to UMD modules.

0 commit comments

Comments
 (0)