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:
-
Obtain the current page number using the internal
_pageNum
variable:let currentPage = $("#pdfViewer").data('kendoPDFViewer')._pageNum;
-
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)`); }
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.