New to Kendo UI for jQuery? Download free 30-day trial

Rotating a Specific Page in Kendo UI PDFViewer

Environment

Product Kendo UI for jQuery PDFViewer
Version 2024.2.514

Description

I need to rotate a specific page in the PDFViewer. How can I rotate the current page displayed in the viewer?

This KB article also answers the following questions:

  • How can I apply rotation to a page in Kendo UI PDFViewer?
  • Is it possible to rotate only the currently viewed page in PDFViewer?

Solution

To rotate a specific page in the PDFViewer for Kendo UI, follow these steps:

  1. Obtain the current page number using the internal _pageNum variable:

    let currentPage = $("#pdfViewer").data('kendoPDFViewer')._pageNum;
    
  2. Determine the current rotation degree of the page and add 90 degrees to rotate it:

    function rotatePDF(){
       let currentPage = $("#pdfViewer").data('kendoPDFViewer')._pageNum;      
       let currentTransform = $('.k-page:nth-child(' + currentPage + ')')[0].style.transform;
       let degree = Number(currentTransform.match(/\d+/g));
       degree += 90;        
    
       $(`.k-page:nth-child(${currentPage})`).css("transform", `rotate(${degree}deg)`);
    }
    
  3. Execute the rotatePDF function to rotate the currently displayed page. This can be triggered by a button click or any other event suitable for your application.

In the example below the currently displayed page will be rotated on a button click:

<div id="example">
      <div id="pdfViewer">
      </div>
    </div>
    <script>
      var rotate = 0;

      $.when(
        $.getScript("https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"),
        $.getScript("https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js")
      )
        .done(function () {
        window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js';           
      }).then(function(){

        $("#pdfViewer").kendoPDFViewer({
          toolbar: {
            items: [
              "pager",
              {
                name: "Rotate",
                title:"rotate",
                template: "<div class='rotateTool'><button title='rotate' class='k-button' onclick='rotatePDF()'>Rotate</button><select style='width:auto' id='selectPage'></select></div>"
              }
            ]
          },
          pdfjsProcessing: {
            file: "https://demos.telerik.com/kendo-ui/content/web/pdfViewer/sample.pdf"
          },
          width: "100%",
          height: 1200
        });
        $("#selectPage").kendoDropDownList({
          dataSource:["1","2","3"],
          width:50
        })
      })


      function rotatePDF(){

        let currentPage = $("#pdfViewer").data('kendoPDFViewer')._pageNum;      
        let current = $('.k-page:nth-child(' + currentPage + ')')[0].style.transform
        let degree = Number(current.match(/\d+/g))        
        degree +=90        

        $(`.k-page:nth-child(${currentPage})`).css("transform", `rotate(${degree}deg)`)

      }
    </script>

Notes

  • The PDFViewer component does not provide a direct method to identify the currently displayed page. The solution uses the internal _pageNum variable as a workaround.
  • The rotation is applied by manipulating the CSS transform property of the page element. This approach may need adjustments if the PDFViewer's markup changes in future versions.

See Also

In this article