How to rotate single page in whole pdf?
How To
In some scenarios you need to rotate a single page in the PdfViewer withouht changing the orientation of the whole document. You can achieve that by transforming the element of the desired page utilizing the CSS rotate() functionality.
Solution
Assign a handler to the PdfViewer's client-side
PreRenderevent.Implement a function applying the desired rotation to a specific page in the viewer
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
<title>Telerik ASP.NET Example</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js"></script>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<script type="text/javascript">
window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js';
</script>
<telerik:RadPdfViewer runat="server" ID="RadPdfViewer1" Height="550px" Width="100%">
<ClientEvents OnRender="onPdfRender" />
<PdfjsProcessingSettings File="Document.pdf">
</PdfjsProcessingSettings>
</telerik:RadPdfViewer>
<script>
function onPdfRender(pdfViewer, args) {
rotateSinglePage(2, 90)
}
function rotateSinglePage(pageNum, degree) {
var viewerMain = $find("RadPdfViewer1").get_element();
var pageContainer = viewerMain.querySelector("div[data-number='" + pageNum + "']");
pageContainer.style.transform = "rotate(" + degree + "deg)";
}
</script>
</form>
</body>
</html>