loadPage

Renders page canvas by number

To run the below example, open it in Dojo

Example

<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">
  <button id="btn">Load 3rd page of the current document</button>
  <br/><br/>
  <div id="pdfViewer"></div>
</div>

<script type="module">
  $(document).ready(function () {
      var button = $("#btn").kendoButton({
      click: onChange,
      }).data("kendoButton");

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


      function onChange(e) {
      pdfViewer.bind("render", function(){
          var canvas = pdfViewer.pageContainer.find("canvas")[2];

          $('<div></div>').kendoAlert({
          content: "<img width ='300' height ='300' src='"+ canvas.toDataURL() +"'/>"
          }).data("kendoAlert").open();
      })

      pdfViewer.loadPage(3);

      }
  });
</script>