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
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
Our thoughts here at Progress are with those affected by the outbreak.
Rank 1
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.
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
Our thoughts here at Progress are with those affected by the outbreak.