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

        <div id="example">
        <button id="btn">Load 3rd page of the current document</button>
        <br/><br/>
        <div id="pdfViewer">
        </div>
        </div>

        <script>
        $(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>