Cannot declare pdfviewer without crashing

4 posts, 0 answers
  1. Nicholas
    Nicholas avatar
    4 posts
    Member since:
    Mar 2020

    Posted 30 Mar 2020 Link to this post

    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.

  2. Dimitar
    Admin
    Dimitar avatar
    499 posts

    Posted 01 Apr 2020 Link to this post

    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.
  3. Nicholas
    Nicholas avatar
    4 posts
    Member since:
    Mar 2020

    Posted 02 Apr 2020 in reply to Dimitar Link to this post

    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.

  4. Dimitar
    Admin
    Dimitar avatar
    499 posts

    Posted 02 Apr 2020 Link to this post

    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.
Back to Top