loadPage

Renders page canvas by number

To run the below example, open it in Dojo

Example

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