fromFile

Displays the file passed as a parameter in the PDFViewer. Currently, supported only for PDFJS Processing.

To run the below example, open it in Dojo

Example - pass an URL to load a file

    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.mjs" type="module"></script> <!-- Include pdf.js before the kendo scripts -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.worker.mjs" type="module"></script> <!-- Include pdf.worker.js before the kendo scripts -->
    <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" type="module"></script>


    <div id="example">
        <div class="box">
            <div class="box-col">
                <h4>Load File</h4>
                <ul class="options">
                    <li>
                        <button class="k-button" id="loadFile" type="button">Load</button>
                    </li>
                </ul>
            </div>
        </div>
        <div id="pdfViewer">
        </div>
    </div>

    <script type="module">
        $(document).ready(function () {

            var pdfViewer = $("#pdfViewer").kendoPDFViewer({
                pdfjsProcessing: {
                    file: "https://demos.telerik.com/kendo-ui/content/web/pdfViewer/sample.pdf"     },
                width: "100%",
                height: 700
            }).data("kendoPDFViewer");

            $("#loadFile").click(function () {
                pdfViewer.fromFile("https://demos.telerik.com/kendo-ui/content/web/pdfViewer/How Does Kendo UI Cut Development Time.pdf")
            });
        });
    </script>

Example - Pass a base64 string to load a file

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.mjs" type="module"></script> <!-- Include pdf.js before the kendo scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.worker.mjs" type="module"></script> <!-- Include pdf.worker.js before the kendo scripts -->
<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" type="module"></script>

<div id="pdfViewer">
</div>
<script type="module">
  var data;
  var request = new XMLHttpRequest();
  request.open('GET', "https://demos.telerik.com/kendo-ui/content/web/pdfViewer/sample.pdf", true);
  request.responseType = 'blob';
  request.onload = function() {
    var reader = new FileReader();
    reader.readAsDataURL(request.response);
    reader.onload =  function(e){

      const string = e.target.result;
      const substring = ",";

      data = string.substring(string.indexOf(substring)+1); 
      var pdfViewer = $("#pdfViewer").kendoPDFViewer({
        width: "100%",
        height: 700
      }).data("kendoPDFViewer");

      pdfViewer.fromFile({data: data})
    };
  };
  request.send();
</script>