This is a migrated thread and some comments may be shown as answers.

Cannot declare pdfviewer without crashing

3 Answers 55 Views
PDFViewer
This is a migrated thread and some comments may be shown as answers.
Nicholas
Top achievements
Rank 1
Nicholas asked on 30 Mar 2020, 10:30 PM

I'm following some of the most basic kendoPDFViewer examples, and this section of code in the js file consistently crashes;

                            var pdfViewer = $("#documentViewer").data("kendoPDFViewer");
                            if (!pdfViewer) {
                                pdfViewer = $("#documentViewer").kendoPDFViewer({ //<------crashes here
                                    pdfjsProcessing: {
                                        file: ""
                                    },
                                    width: "100%",
                                    height: 500
                                }).data("kendoPDFViewer");
                            }

#documentViewer is the id of the div I'm attempting to attach the viewer to.  Debugging shows the problem happening when I try to declare the currently null pdfViewer as a kendoPDFViewer.  I made sure to include the pdf scrips in my index.html as well.

<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>

 

Am I putting the scripts in the wrong location or something?

 

Thanks.

3 Answers, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 01 Apr 2020, 01:56 PM

Hi Nicholas,

Most probably the pdf.js related scripts are not loaded before the PDFViewer declaration and an error is thrown. The following Dojo snippet is based on PDFViewer Basic Usage demo and the snippet provided in this thread - it works as expected.

Regards,
Dimitar
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Nicholas
Top achievements
Rank 1
answered on 02 Apr 2020, 02:57 PM

The provided sample for the dojo has both the element & the script declared in just the HTML.  What I'm trying to do is declare the element in the HTML, and then declare it as a pdfviewer in a javascript file.  I can get it to work with your implementation, but we don't use the logic in our HTML files.

Do you have a version of this that works with a javascript file?  That's where I'm running into a crash after declaring an element to be a kendoPDFViewer.

0
Dimitar
Telerik team
answered on 02 Apr 2020, 03:55 PM

Hi Nicholas,

If the initialization should be in another file, then it becomes as follows:

HTML

<!DOCTYPE html>
<html>
  <head>
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title>PDFViewer</title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.219/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.219/styles/kendo.default.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.219/styles/kendo.default.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2020.1.219/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.1.219/js/kendo.all.min.js"></script>
    <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>
    <script src="viewer.js"></script>
  </head>
  <body>
    <div id="example">
      <div id="documentViewer">
      </div>
    </div>
  </body>
</html>

And viewer.js

$(document).ready(function () {

    var pdfViewer = $("#documentViewer").data("kendoPDFViewer");

    if (!pdfViewer) {
      pdfViewer = $("#documentViewer").kendoPDFViewer({ //<------no crash here
        pdfjsProcessing: {
          file: "sample.pdf"
        },
        width: "100%",
        height: 500
      }).data("kendoPDFViewer");
    }
  });

 

Regards,
Dimitar
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
PDFViewer
Asked by
Nicholas
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Nicholas
Top achievements
Rank 1
Share this question
or