Why does PDFViewer with PDFJS Processing have to include script as type="module". Timing is all off

10 Answers 55 Views

PDFViewer

Jim asked on 24 Mar 2025, 08:45 PM

I am trying to use the PDFViewer for the first time. I am using PDFJS processing. In the examples it is easy to understand including the pdf.mjs and worker.mjs as type='module' along with kendo as type='module'. However, if I understand this correctly type='module' delays loading until after the cshtml page has completed. We use a common layout page that loads required script libraries (including kendo) as part of the page. Other parts of the layout and pages require kendo to be loaded and accessible, so it cannot be changed to type='module' without breaking stuff. Is it possible to load the PDFJS libraries as regular javascript includes rather than modules ?

10 Answers, 1 is accepted

answered on 25 Mar 2025, 08:48 AM

Hello Jim,

Indeed, starting with 2024.4.1112 (2024 Q4) Kendo version the Kendo jQuery PDFViewer supports the 4.x.x version of the PDFJs library. However, the latest PDFJs versions use ECMAScript modules, which require the type="module" attribute on the script which is referencing the kendo.all.js file and on the script that creates the PDFViewer.

What I would suggest is taking a look at the Knowledge Base article in the Telerik UI for ASP.Net MVC documentation where some possible solutions are described and check if the suggestions will suit your needs. The Telerik UI for ASP.Net MVC are server-side wrappers that use the Kendo UI for jQuery components implementation. Thus, although the article is from the Telerik UI for ASP.Net MVC documentation, some of the workarounds could be suitable also in Kendo UI for the jQuery scenario.

- https://www.telerik.com/aspnet-mvc/documentation/knowledge-base/pdfviewer-pdfjs-script-workarounds

For example, if it is suitable for your scenario you could try loading the Kendo scripts twice as described in the section linked here. Such approach is also demonstrated in the Dojo linked here - https://dojo.telerik.com/AVcnCTkC.

I remain at your disposal should you have any questions.

Regards,
Neli
Progress Telerik

Enjoyed our products? Share your experience on G2 and receive a $25 Amazon gift card for a limited time!

answered on 25 Mar 2025, 01:43 PM

Hi, thanks for the complete response. I tried the multi load option, as well as the pdfviewer only option. Neither worked based on my knowledge. Maybe you can help. The multi-time load actually worked for the pdfviewer but the second load of kendo.all complained about an invalid license, resulting in other kendo operations failing. I loaded the license file a second time also (as type='module') but that didn't help. Can you look into this please. The loading of PDFViewer only did not work based on the files suggested in the article. I kept getting other kendo related javascript errors. I continued to include other libraries that it seemed to use and eventually it loaded. But when I tried to load a file it still failed with a "PDF file fails to process" message. Could you please look deeper into what files may be necessary. I think the article may be outdated a bit. I'm not sure if this is license related also. I included the following files:

kendo.draggable.cmn.chunk.min.js

kendo.pdfjs.loader.min.js

kendo.pdfviewer-common.cmn.chunk.min.js

kendo.pdfviewer.min.js

kendo.pdf.js (not sure if this was necessary)

Thank you.

answered on 26 Mar 2025, 07:47 AM

pdfjsmultipletest.zip

H Jim,

I managed to replicate the described issue with the 'license not found' warning. However, on my side, the issue is resolved after adding a reference to the license key a second time with attribute type="module".

<head>
    <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>
    <script src="./telerik-license.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>
    <script type="module" src="./telerik-license.js"></script>
  </head>

Attached you will find the same sample from the Dojo with changes mentioned above applied. I also added a file 'telerik-license.js' file where you could paste your license and test. Then you can try to open the folder in VS Code and run it using live server, and no license warning or watermark should appear. On my side there appear to be no more errors and the added components seems to work as expected. I guess that the scenario on your side is more complicated as the Dojo example is a basic one. Thus, could you please let me know how I can replicate the errors observed on your side?

Regarding the list of files, what is the behavior if you try to include the entire kendo.all.min.js with type="module" instead of the single scripts? Also if you prefer to load the individual scripts below you will find the list with individual scripts for PDFViewer:

- https://docs.telerik.com/kendo-ui/intro/scripts/scripts-pdf

I would like to mention that usually we do not suggest loading the kendo scripts multiple times. However, the suggestion is an attempt to find a workaround in the current scenario where you need to load only some scripts as modules.

Looking forward to your reply.

Regards,

Neli
Progress Telerik

Enjoyed our products? Share your experience on G2 and receive a $25 Amazon gift card for a limited time!

answered on 26 Mar 2025, 02:23 PM

Hi,

Yes running the kendo.all twice causes numerous issues particularly with MVVM. We use kendo's "extend" to create class hierarchies. Then "new" up instances of a particular class. We then kendo.bind(instanceInterfaceElement, instanceData). This breaks with a second loading of the kendo.all. And doesn't even seem to work with a rebind. My basic question remains, why does kendo need to load AFTER pdfjs (which is of type "module") in order for the PDFViewer to work. I can understand having to delay the creation of the PDFViewer itself, but not the loading of the whole library itself. Is there no other way? I will need to play with this more. It may take some time. Please don't close this issue. I will be opening another ticket with regards to your licensing. It is a pain. Especially when you change how it works. 2025 is different AGAIN!

answered on 27 Mar 2025, 09:51 AM

Hi Jim,

My basic question remains, why does kendo need to load AFTER pdfjs (which is of type "module") in order for the PDFViewer to work? - The PDFViewer's PDFjsProcessing functionality depends on the PDF.js third-party library. This means that the PDFViewer functionality can not work properly without the pdf.js library being loaded. As of version 4,* the owners of PDF.js decided to provide the library only as EcmaScript modules. This requires the PDFViewer's files to also be loaded as modules.

I will discuss your scenario with a developer from the team to check if any other approaches are possible. I will back to you on this matter next week.

I will need to play with this more. It may take some time. Please don't close this issue. - Please note that the tickets are automatically closed after a certain time of inactivity. However, once you have additional questions related to the initial topic of the thread, you can reopen the ticket anytime by sending a message in the thread.

I will be opening another ticket with regard to your licensing. - I am sorry to hear that you face any issues with loading the license and I understand your frustration. The introduced changes are due to Telerik UI and Kendo UI products using now the same licensing mechanism. Here is an Knowledge Base article where you could read more - https://docs.telerik.com/kendo-ui/knowledge-base/license-key-file-name-and-environment-variable. However, I will appreciate it that you will open a separate ticket for discussing the issues related to the license. Usually, we are trying to separate different questions in separate threads as this way each thread will be consistent and will be related to a single issue. This allows us to better track the threads and shorten the response time.

Regards,
Neli
Progress Telerik

Enjoyed our products? Share your experience on G2 and receive a $25 Amazon gift card for a limited time!

answered on 27 Mar 2025, 01:30 PM

Hi Neli,

Thanks for your continued support on this. Last question (for the moment), is there a minimum version of pdfjs that is required. As I understand it, they changed to the "module" style in 4.0+. Update - I just downloaded the 3.11.174 which is the latest "regular javascript" version and it seems to work fine. This looks to be a good solution for me at the moment. Should have thought of it earlier I guess. I didn't realize older versions were available until I went straight to the cdnjs.com site. Please pass it along to your team when they are considering using more modern pdfjs features. Not sure if some already exist. If so, they should at least fail silently with older versions. Thanks again for your help.

answered on 28 Mar 2025, 02:05 PM

Hi Neli,

I hope you're not bothered by my continued replies. I think this thread could be informative for others (not sure if it is public). Given all that I know now, I started wondering how UI for ASP.NET MVC would work. We generally use Kendo UI javascript straight up but I have certainly done enough MVC to remember that the resulting source generally just dumped inline javascript blocks following the html of each component. So, I was wondering how this was going to work with PDFJS as a module. So, I looked at the MVC demos for PDFViewer. Looking at the page source of the demo (not the simple source you show), it seems the resulting javascript does a kendo.syncReady(function() { stuff to create the PDFViewer }); I can look this up on the internet and its quite easy to understand, however I couldn't find actual API documentation on it. I did find references to it in the Deferred Initialization section of UI for MVC docs (not Kendo UI for jQuery). I am assuming that will run the specified function AFTER Kendo is done loading, not just the document. So, if I loaded Kendo as a module and did a kendo.syncReady( ... ) inline somewhere it would correctly execute after the kendo library loads. Can you verify this is correct? I'm sorry if it seems I'm technically nitpicking this topic but I'd like to understand the options for our architecture if "modules" become a common thing. Thanks again.

answered on 31 Mar 2025, 11:14 AM

Hi Jim,

Feel free to send us any questions about the Kendo components. I'll be happy to assist you and provide the information you need.

Indeed, the UI for ASP.NET MVC/UI for ASP.NET Core components are server-side wrappers of the Kendo UI for jQuery. When a UI for an ASP.NET MVC component is created, a script containing the configuration with Kendo UI for jQuery syntax is added to the page. The kendo.syncready() ensures that the code inside the provided callback runs after all Kendo UI's dependencies are fully loaded and ready for use. This is crucial in modular JavaScript setups where loading sequences might be asynchronous.

So, your assumption is correct - I am assuming that will run the specified function AFTER Kendo is done loading, not just the document. So, if I loaded Kendo as a module and did a kendo.syncReady( ... ) inline somewhere it would correctly execute after the kendo library loads.

Just for your information, the current thread is a private one. Only the threads in our forum are public. However, I could also convert this one to a forum thread.

Do not hesitate to contact us if you have any additional questions.

Regards,
Neli
Progress Telerik

Enjoyed our products? Share your experience on G2 and receive a $25 Amazon gift card for a limited time!

Neli

commented on 01 Apr 2025, 07:50 AM

Hi Jim,

Thank you very much for your feedback. I highly appreciate it..

Thank you also for your permission for converting the thread. Just to let you know that the thread is now public and you will find it in the link below:

- https://www.telerik.com/forums/why-does-pdfviewer-with-pdfjs-processing-have-to-include-script-as-type-module-timing-is-all-off

Regards,

Neli