Aprende a cambiar el nivel de zoom de una ventana en Electron Framework.

Cómo cambiar el nivel de zoom de la ventana en Electron Framework

Como desarrollador, a veces es bastante tedioso cambiar de estilo dinámicamente. Una de esas tareas tediosas es cambiar el tamaño de fuente de la aplicación con JavaScript dinámicamente, ya que normalmente hará que su diseño muestre errores y otros problemas. A veces, usar el zoom del navegador en lugar de cambiar los estilos puede funcionar mejor, por lo que puede aprovechar Electron si recuerda que es, por así decirlo, un navegador para su propia aplicación. Puede cambiar el tamaño de texto, imágenes y videos para una página web o para todas las páginas web (Windows en este caso).

Cambiar el nivel de zoom

Para cambiar el nivel de zoom de una ventana en Electron, deberá usar el módulo webFrame de Electron que le permite personalizar la representación de la página web actual. Esta tarea se ejecuta solo en el proceso Renderer (la vista). Acceda al módulo desde electron usando:

const {webFrame} = require('electron')

// Establecer el factor de zoom al 200%
webFrame.setZoomFactor(2);

El método cambia el factor de zoom al especificado. El factor de zoom es el porcentaje de zoom dividido por 100, por lo que 500% = 5.0 (factor de zoom máximo 5). También puede recuperar el nivel actual utilizando el método  getZoomFactor:

const {webFrame} = require('electron')

// Obtenga el factor de zoom, es decir: 2
let currentZoomFactor = webFrame.getZoomFactor();

Ejemplo

El siguiente ejemplo muestra cómo cambiar el factor de zoom del navegador usando una entrada de rango:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Electron Zoom State</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1, minimum-scale=1">
    </head>
    <body>
        <div id="app">
            Current Zoom: <span style="font-weight: bold;" id="current-value"></span>

            <br />
            <input type="range" id="zoom" min="1" value="1" max="5" step="1">
        </div>

        <script>
            const {webFrame} = require('electron'); 
            
            let zoomLevelSpan = document.getElementById("current-value");

            function getFactorInPercent(value){
                return (parseInt(value) * 100) + "%"
            }

            document.getElementById("zoom").addEventListener("input", function(){
                var value = this.value;

                // Actualizar factor de zoom
                webFrame.setZoomFactor(parseInt(value));

                // Actualizar etiqueta
                zoomLevelSpan.innerHTML = getFactorInPercent(value);
            }, false);

            document.addEventListener('DOMContentLoaded', function(){
                zoomLevelSpan.innerHTML = getFactorInPercent(webFrame.getZoomFactor());
            }, false);
        </script>
    </body>
</html>

Que te diviertas ❤️!


Ingeniero de Software Senior en EPAM Anywhere. Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores