New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

Using PDFViewer with PDF.js Version 4.x.x or Later

Environment

Product Version	2024.4.1112 or later
Product	PDFViewer for Progress® Telerik® UI for ASP.NET MVC

The 2024 Q4 November release (version 2024.4.1112) introduced a new common engine for the PDFViewer component and support for the latest PDF.js library version 4. x.x. Since PDF.js 4 (versions 4.x.x) uses ECMAScript modules, the required Kendo UI scripts must be included as modules as well.

The Telerik UI for ASP.NET MVC versions before 2024.4.1112 are not compatible with PDF.js version 4.x. You must use either PDF.js version 2.x or 3.x. For reference, the example below shows the PDFViewer configured for PDF.js processing when using versions before 2024.4.1112.

Razor

    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"></script>
    <script>
        window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js';
    </script>

    @(Html.Kendo().PDFViewer()
        .Name("pdfviewer")
        .PdfjsProcessing(pdf => pdf
            .File("")
        )
        .Height(1200)
    )

When upgrading to version 2024.4.1112 or later, including the required Kendo UI scripts by adding type="module" in the script tags will throw the following client-side error: Kendo script, defined as a module, is not defined when the PDFViewer is initialized.

However, adding the scripts without type="module" is also not an option because the PDF.js library requires module scripts: PDF.js scripts are not added

Solution

Apply any of the following approaches when using Telerik UI for ASP.NET MVC PDFViewer (version 2024.4.1112 or later):

Using RenderAsModule option for module-based script initialization
Loading Kendo UI scripts twice
Loading only the required PDFViewer scripts
Compiling the PDF.js scripts to UMD modules

Using RenderAsModule for Module-Based Script Initialization

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.

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.

Global.asax
    KendoMvc.Setup(options =>
    {
        options.RenderAsModule = true;
    });
_Layout
    <link href="https://kendo.cdn.telerik.com/themes/10.0.1/default/default-ocean-blue.css" rel="stylesheet" type="text/css" />
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" type="module"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.8.69/pdf.mjs" type="module"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.8.69/pdf.worker.mjs" type="module"></script>
    <script src="https://cdn.kendostatic.com/2024.4.1112/js/kendo.all.min.js" type="module"></script>
    <script src="https://cdn.kendostatic.com/2024.4.1112/js/kendo.aspnetmvc.min.js" type="module"></script>
Razor
    @(Html.Kendo().PDFViewer()
        .Name("pdfviewer")
        .PdfjsProcessing(pdf => pdf.File(""))
        .Height(800)
    )

    <script type="module">
        $(document).ready(() => {
            var pdfviewer = $('#pdfviewer').data('kendoPdfViewer');
            console.log(pdfviewer);
        })  
    </script>

Loading Kendo UI Scripts Twice

Another workaround is to include the Kendo UI scripts twice—with and without type="module":

Razor

    <link href="https://kendo.cdn.telerik.com/themes/10.0.1/default/default-ocean-blue.css" rel="stylesheet" type="text/css" />

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

    <!-- Add the Kendo UI scripts in standard fashion. -->
    <script src="https://cdn.kendostatic.com/2024.4.1112/js/kendo.all.min.js"></script>
    <script src="https://cdn.kendostatic.com/2024.4.1112/js/kendo.aspnetmvc.min.js"></script>

    <!-- Add the "pdf.mjs" and "pdf.worker.mjs" module scripts. -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.mjs" type="module"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.worker.mjs" type="module"></script>

    <!-- Add the Kendo UI script as a module afterwards -->
    <script src="https://cdn.kendostatic.com/2024.4.1112/js/kendo.all.min.js" type="module"></script>

    @(Html.Kendo().PDFViewer().Name("pdfviewer")
        .PdfjsProcessing(pdf => pdf.File(@Url.Content("../sample.pdf")))
            .Height(1200)
        )
    @(Html.Kendo().DateTimePicker().Name("picker"))

Loading Only the Required PDFViewer Scripts

Instead of loading the whole "kendo.all.min.js" script file twice, you can include only the specific PDFViewer scripts. Also, you can load the scripts and the PDFViewer declaration through a Partial View:

_Layout
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/10.0.1/default/default-ocean-blue.css">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2024.4.1112/js/kendo.all.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2024.4.1112/js/kendo.aspnetmvc.min.js"></script>

    <partial name="PDFViewer" />
Razor
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.mjs" type="module"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.worker.mjs" type="module"></script>
    <script src="https://kendo.cdn.telerik.com/2024.4.1112/mjs/kendo.pdfviewer-common.cmn.chunk.js" type="module"></script>
    <script src="https://kendo.cdn.telerik.com/2024.4.1112/mjs/kendo.pdfviewer.js" type="module"></script>

    @(Html.Kendo().PDFViewer()
        .Name("pdfviewer")
        .PdfjsProcessing(pdf => pdf.File(""))
        .Height(1200)
    )

Compiling PDF.js Scripts to UMD Modules

Theoretically, you can download the PDF.js scripts and use a JS bundler tool like webpack to compile them to UMD modules.