Full Screen Button in PDFViewer

Environment

Product	Telerik UI for ASP.NET Core Upload
Progress Telerik UI for ASP.NET Core version	Created with the 2023.3.1114 version

Description

How can I add a button that opens the PDF file in full screen when using the PDFViewer component?

Solution

1. Create a custom button in the Toolbar() configuration and specify a toggle event handler.
2. Use the requestFullscreen() and exitFullscreen() methods to toggle the fullscreen mode.

Razor

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

    @(Html.Kendo().PDFViewer().Name("pdfviewer")
        .PdfjsProcessing(pdf => pdf
            .File(c => c.Url(Url.Content("~/Document.pdf")))
        )
        .Toolbar(tb => tb.Items(item => item
            .Add()
            .Name("myCustomTool")
            .Icon("fullscreen")
            .Togglable(true)
            .Type("button")
            .Toggle("toggleBtn")
        ))
        .Height(1200)
    )

Razor

     @addTagHelper *, Kendo.Mvc

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

    <kendo-pdfviewer name="pdfviewer" height="1200">
        <pdfjs-processing file="@Url.Content("~/Dpocumet.pdf")" />
        <toolbar>
            <pdfviewer-toolbar-items>
                <pdfviewer-toolbar-item name="myCustomTool" icon="fullscreen" togglable="true" type="button" toggle="toggleBtn">
                </pdfviewer-toolbar-item>
            </pdfviewer-toolbar-items>
        </toolbar>
    </kendo-pdfviewer>

Html

<script>
    function toggleBtn(ev) {
        var viewerElement = kendo.widgetInstance($("#pdfviewer")).element[0];
        if (getFullscreenElement()) {
            document.exitFullscreen();
        } else {
            viewerElement.requestFullscreen();
        }
    }

    function getFullscreenElement() {
        return document.fullscreenElement
            || document.webkitfullscreenElement
            || document.mozfullscreenElement
            || document.msfullscreenElement
    }
</script>

More ASP.NET Core PDFViewer Resources

• ASP.NET Core PDFViewer Documentation

• ASP.NET Core PDFViewer Demos

• ASP.NET Core PDFViewer Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the PDFViewer for ASP.NET Core

• Server-Side API Reference of the PDFViewer for ASP.NET Core

• Server-Side TagHelper API Reference of the Chart for ASP.NET Core

• Telerik UI for ASP.NET Core Breaking Changes

• Telerik UI for ASP.NET Core Knowledge Base