Unplanned
Last Updated: 15 Dec 2024 19:29 by Marc
Nicolas
Created on: 20 Dec 2022 07:16
Category: PDFViewer
Type: Feature Request
27
Add the ability to change the default zoom level
I would like to be able to control the default zoom level in the PDF viewer. For example, I would like to be able to set it as "Fit to Page". 
4 comments
Marc
Posted on: 15 Dec 2024 19:29
Updated version:

// Set the zoom option through the menu since it is not possible to set by code
// 2 = Full-width
function setZoomOption(zoomOption) {
var element = $(".k-combobox input").last();
var kendodata = element.data("kendoComboBox");

// Initialize the ComboBox only if it hasn't been initialized yet
if (!kendodata) {
element.kendoComboBox();
logMessage("SetZoomOption: ComboBox was not initialized, initialized now.");
}
var combo = element.getKendoComboBox();

logMessage("SetZoomOption element:" + element);
logMessage("SetZoomOption combo:" + combo);

if (combo) {
logMessage("SetZoomOption: Zoomcombo found");

combo.select(zoomOption);
combo.trigger("change");
}
else {
logMessage("SetZoomOption: Zoomcombo not found");
}
}

// Define the constant
const WRITE_TO_CONSOLE = true;
function logMessage(message) {
    if (WRITE_TO_CONSOLE) {
        console.log(message);
    }
}
David
Posted on: 07 Mar 2024 13:11

I created the following using reflection to allow you to change the zoom to "Fit to width" at any time, but you can also do "Fit to page" as well.

private async Task ZoomPdf()
{
if (_pdfViewerRef == null) return;

var type = _pdfViewerRef.GetType();

var parameterTypes = new[] { typeof(PdfViewerZoomLevelDescriptor) };

var dynMethod = type.GetMethod("ZoomAsync", BindingFlags.NonPublic | BindingFlags.Instance, parameterTypes);

await (dynMethod?.Invoke(_pdfViewerRef, new object[] { GetZoomLevelDescriptor(_pdfViewerRef, type, "Fit to width") }) as Task ?? Task.CompletedTask);
}

private static PdfViewerZoomLevelDescriptor GetZoomLevelDescriptor(object? instance, IReflect type, string valueToFind)
{
// Use reflection to get the ZoomLevels property
var zoomLevelsProperty = type.GetProperty("ZoomLevels", BindingFlags.NonPublic | BindingFlags.Instance);

if (zoomLevelsProperty == null)
{
throw new InvalidOperationException("ZoomLevels property not found.");
}

// Get the value of the ZoomLevels property
var zoomLevelsValue = zoomLevelsProperty.GetValue(instance);

// Ensure the value is of the correct type (List<PdfViewerZoomLevelDescriptor>)
if (zoomLevelsValue is List<PdfViewerZoomLevelDescriptor> zoomLevels)
{
// Search for the descriptor with the specified value
var descriptor = zoomLevels.FirstOrDefault(z => z.Value == valueToFind);

return descriptor;
}

throw new InvalidOperationException("ZoomLevels property is not of the expected type.");
}

ADMIN
Dimo
Posted on: 23 Nov 2023 08:56

Hello Marc,

Thanks for your contribution. Indeed, a JavaScript workaround is possible. Here is a complete example for the Blazor PdfViewer.

Regards,
Dimo
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!
Marc
Posted on: 23 Nov 2023 04:26

A workaround for 'Fit to Width' can be accomplished by adding this JavaScript, but a regular setting would be better...

function setZoomOption(zoomOption) {
var combo = $(".k-combobox-clearable").find("input").last().getKendoComboBox();

if (combo) {
console.log("SetZoomOption: Zoomcombo found");

combo.select(zoomOption);
combo.trigger("change");
}
else {
console.log("SetZoomOption: Zoomcombo not found");
}
}

And call it from HTML:
 <input type="button" value="Set ZoomOption" onclick="setZoomOption(2)" />

Or from Blazor:

    private async Task SetZoomFullWidth()
    {
        // Set scale does not work / is not available
        // await JsRuntime!.InvokeVoidAsync("setScale",PdfZoom);
        await JsRuntime!.InvokeVoidAsync("setZoomOption", 2);
    }