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
- Create a custom button in the
Toolbar()configuration and specify a toggle event handler. - Use the
requestFullscreen()andexitFullscreen()methods to toggle the fullscreen mode.
<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)
)
@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>
<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>