ElectronJS es un marco de código abierto que se utiliza para crear aplicaciones de escritorio nativas multiplataforma utilizando tecnologías web como HTML, CSS y JavaScript que pueden ejecutarse en los sistemas operativos Windows , macOS y Linux . Combina el motor Chromium y NodeJS en un solo tiempo de ejecución.
Todos los navegadores Chromium admiten guardar páginas web como archivos HTML en el sistema nativo. Por lo general, esta funcionalidad se activa con un simple atajo de teclado Ctrl+S en cualquier página web en el navegador Chromium. Electron también exhibe este comportamiento y nos permite guardar las instancias de BrowserWindow como archivos HTML en el sistema nativo utilizando los métodos de instancia del objeto BrowserWindow y la propiedad webContents . Cada instancia de BrowserWindow se ejecuta en su propio proceso de representación individual. Cada Renderer Process está aislado y tiene sus propios archivos HTML, CSS y JavaScript asociados. Podemos guardar solo el archivo HTML o podemos guardar el HTML y sus archivos CSS y JS asociados, respectivamente, según las opciones proporcionadas al método de instancia de la propiedad webContents . Este tutorial demostrará cómo guardar instancias de BrowserWindow como archivos HTML en el sistema nativo en Electron.
Suponemos que está familiarizado con los requisitos previos que se describen en el enlace mencionado anteriormente. Para que Electron funcione, node y npm deben estar preinstalados en el sistema.
- Estructura del proyecto:
Ejemplo: Siga los pasos dados en Operaciones de escritorio en ElectronJS para configurar la aplicación básica de Electron. Copie el código estándar para el archivo main.js y el archivo index.html como se indica en el artículo. Realice también los cambios necesarios mencionados para el archivo package.json para iniciar la aplicación Electron. Continuaremos construyendo nuestra aplicación usando la misma base de código. Los pasos básicos necesarios para configurar la aplicación Electron siguen siendo los mismos.
paquete.json:
{
"name": "electron-html",
"version": "1.0.0",
"description": "Save HTML Page in Electron",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"keywords": [
"electron"
],
"author": "Radhesh Khanna",
"license": "ISC",
"dependencies": {
"electron": "^8.3.0"
}
}
Cree la carpeta de activos según la estructura del proyecto. Usaremos la carpeta de activos como la ruta predeterminada para guardar el HTML y sus archivos asociados generados por la aplicación. Cree el archivo index.css según la estructura del proyecto. Este archivo se crea solo con fines de demostración y lo mantendremos en blanco.
Salida: en este punto, nuestra aplicación electrónica básica está configurada. Al iniciar la aplicación, deberíamos ver el siguiente resultado.
Guardar archivos HTML en Electron: la instancia de BrowserWindow y la propiedad webContents son parte del proceso principal . Para importar y usar BrowserWindow en el proceso Renderer , usaremos el módulo remoto Electron .
- index.html : agregue el siguiente fragmento en ese archivo. Los botones Guardar esta página como HTML y Guardar página GeeksForGeeks como HTML aún no tienen ninguna funcionalidad asociada.
html
<head> <link rel="stylesheet" href="index.css"> </head> <body> <h3>Save Pages as HTML file</h3> <button id="save"> Save This Page as HTML </button> <button id="load"> Save GeeksForGeeks Page as HTML </button> </body>
- index.js : agregue el siguiente fragmento en ese archivo.
javascript
const electron = require('electron');
const path = require('path');
// Importing BrowserWindow using Electron remote
const BrowserWindow = electron.remote.BrowserWindow;
let win = BrowserWindow.getFocusedWindow();
// let win = BrowserWindow.getAllWindows()[0];
// Specifying the assets folder as the default path
const filepathlocal = path.join(__dirname, '../assets/page.html');
const filepathload = path.join(__dirname, '../assets/geeksforgeeks.html');
var save = document.getElementById('save');
save.addEventListener('click', () => {
// Works for the Local Page
win.webContents.savePage(filepathlocal, 'HTMLComplete').then(() => {
console.log('Page was saved successfully.')
}).catch(err => {
console.log(err);
});
});
var load = document.getElementById('load');
load.addEventListener('click', (event) => {
// Creating a New BrowserWindow Instance, Loading GeeksForGeeks.org
// And Saving it as an External Page
let window = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
window.loadURL('https://www.geeksforgeeks.org/');
window.webContents.openDevTools();
window.webContents.on('did-finish-load', async () => {
window.webContents.savePage(filepathload, 'HTMLOnly').then(() => {
console.log('Page was saved successfully.')
}).catch(err => {
console.log(err)
});
});
});
El método de instancia win.webContents.savePage(filepath, saveType) se usa para guardar la instancia actual de BrowserWindow como archivo HTML en el sistema nativo, según el parámetro saveType . Devuelve una Promesa y se resuelve cuando la página web se guarda correctamente. Toma los siguientes parámetros.
- ruta de archivo: String Este parámetro no puede estar vacío. Especifica la ruta del archivo donde nos gustaría guardar el HTML generado y los archivos asociados en el sistema nativo. En nuestro código, hemos especificado la ruta del archivo a la carpeta de activos junto con el nombre de los archivos usando el módulo de ruta .
- saveType: String Este parámetro no puede estar vacío. Especifica el tipo de operaciones de guardado que deben realizarse en la instancia de BrowserWindow . Puede tomar cualquiera de los siguientes valores.
- HTMLOnly: este valor de la propiedad saveType guarda solo el archivo HTML de la instancia actual de BrowserWindow sin ningún archivo asociado.
- HTMLComplete: este valor de la propiedad saveType guarda la página web completa de la instancia actual de BrowserWindow, incluido el archivo HTML y los archivos JavaScript y CSS asociados, respectivamente, en la ruta de archivo especificada . Este valor crea una nueva carpeta page_files dentro de la ruta de archivo especificada. Esta carpeta contiene los archivos CSS y JS adicionales de la página web guardada.
- MHTML: este valor de la propiedad saveType guarda el archivo HTML de la instancia de BrowserWindow como MHTML . Significa MIME HTML y es una encapsulación MIME del documento HTML agregado. Es un formato de página web que se utiliza para combinar el código HTML y sus recursos (como imágenes, audio, archivos de video, etc.) que están representados por hipervínculos externos en el código, en un solo archivo HTML. El contenido del archivo MHTML se codifica utilizando el tipo de contenido MIME multipart/related .
El evento de instancia did-finish-load pertenece a la propiedad webContents . Se emite cuando se realiza la navegación de la página web (especificada por el método de instancia window.loadURL() ) y la página está completamente cargada. Esto sucede cuando el control giratorio de la página deja de girar y se envía el evento de carga . En nuestro código, hemos utilizado este evento Instance para esperar a que el sitio web GeeksForGeeks.org se cargue por completo en nuestra Instancia BrowserWindow antes de que podamos guardar el archivo HTML en nuestro Sistema.
Para obtener la instancia actual de BrowserWindow en el proceso Renderer , podemos usar algunos de los StaticMétodos proporcionados por el objeto BrowserWindow .
- BrowserWindow.getAllWindows(): este método devuelve una array de instancias de BrowserWindow activas/abiertas. En esta aplicación, solo tenemos una instancia de BrowserWindow activa y se puede hacer referencia directamente desde la array como se muestra en el código.
- BrowserWindow.getFocusedWindow(): este método devuelve la instancia de BrowserWindow que está enfocada en la aplicación. Si no se encuentra ninguna instancia de BrowserWindow actual, devuelve nulo . En esta aplicación, solo tenemos una instancia de BrowserWindow activa y se puede hacer referencia directamente mediante este método, como se muestra en el código.
Salida: guardar la instancia actual de BrowserWindow especificando win.webContents.savePage(filepathlocal, ‘MHTML’) , archivo de salida MHTML generado.
Publicación traducida automáticamente
Artículo escrito por radheshkhanna y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA