New to Telerik UI for ASP.NET AJAX? Start a free 30-day trial

Set initial page zoom in RadPdfViewer

Description

Check out how to set a predefined zoom option of the RadPdfViewer. Show a PDF file as "Fit to Page" or "Fit to Width" by default.

Solution

Subscribe to the client-side OnRender event of the RadPdfViewer - Client-side Programming
Get a reference of the ToolBar object beneath the PdfViewer via the get_toolBar() function. - RadPdfViewer Object
Set the desired value of the zooming ComboBox to the desired option, e.g. fitToPage, fitToWidth, etc. and trigger the change

You can use a boolean flag to ensure the predefined zooming is applied only once.

Here is sample code demonstrating the approach:

ASPX

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></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>
    <script type="text/javascript">
        window.pdfjsLib.GlobalWorkerOptions.workerSrc = '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"></telerik:RadScriptManager>
        <script>
            var firstRender = true;

            function onRender(e) {
                if (firstRender) {
                    e.get_toolBar().zoom.combobox.value("fitToPage");
                    e.get_toolBar().zoom.combobox.trigger("change");
                    firstRender = false;
                }
            }
        </script>

        <telerik:RadPdfViewer runat="server" ID="pdfViewer" RenderMode="Lightweight" ActivePage="1">
            <PdfjsProcessingSettings File="Document.pdf">
            </PdfjsProcessingSettings>
            <DefaultPageSizeSettings Width="500" />
            <ClientEvents OnRender="onRender" />
        </telerik:RadPdfViewer>
    </form>
</body>
</html>

Set initial page zoom in RadPdfViewer

Description

Solution

See Also