Guardar archivos en ElectronJS

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.

Cualquier aplicación de escritorio nativa debe integrarse con el entorno del sistema operativo. La aplicación debe tener la capacidad de interactuar con las funcionalidades principales del sistema operativo, como el sistema de archivos, la bandeja del sistema, etc. Electron nos proporciona un módulo de diálogo incorporado para mostrar los diálogos nativos del sistema para interactuar con los archivos. Este tutorial utilizará el método de instancia del módulo de diálogo para demostrar cómo guardar archivos localmente 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.

Módulo de diálogo: El Módulo de diálogo es parte del Proceso Principal . Para importar y usar el módulo de diálogo en el proceso Renderer , usaremos el módulo remoto Electron . Para obtener más detalles sobre el módulo remoto, consulte este enlace .

• Estructura del proyecto:
  

Ejemplo: Comenzaremos creando la aplicación Electron para guardar archivos en el sistema local siguiendo los pasos dados.

• Paso 1: navegue a un directorio vacío para configurar el proyecto y ejecute el siguiente comando.

  npm init

  Para generar el archivo package.json . Instale Electron usando npm si no está instalado.

  npm install electron --save

  Este comando también creará el archivo package-lock.json e instalará las dependencias requeridas de node_modules . Cree la carpeta de activos según la estructura del proyecto. Guardaremos los nuevos archivos en esta carpeta desde el cuadro de diálogo nativo.
  paquete.json:

  {
    "name": "electron-save",
    "version": "1.0.0",
    "description": "Save Files to local in Electron",
    "main": "main.js",
    "scripts": {
      "start": "electron ."
    },
    "keywords": [
      "electron"
    ],
    "author": "Radhesh Khanna",
    "license": "ISC",
    "dependencies": {
      "electron": "^8.2.5"
    }
  }
  

• Paso 2: Cree el archivo main.js de acuerdo con la estructura del proyecto. Este archivo es el Proceso Principal y actúa como un punto de entrada a la aplicación. Copie el código Boilerplate para el archivo main.js como se indica en el siguiente enlace . Hemos modificado el código para adaptarlo a las necesidades de nuestro proyecto.

  principal.js:

  const { app, BrowserWindow } = require('electron')    function createWindow() {   // Create the browser window.   const win = new BrowserWindow({     width: 800,     height: 600,     webPreferences: {       nodeIntegration: true     }   })      // Load the index.html of the app.   win.loadFile('src/index.html')      // Open the DevTools.   win.webContents.openDevTools() }    // This method will be called when Electron has finished // initialization and is ready to create browser windows. // Some APIs can only be used after this event occurs. // This method is equivalent to 'app.on('ready', function())' app.whenReady().then(createWindow)    // Quit when all windows are closed. app.on('window-all-closed',() => {   // On macOS it is common for applications and their menu bar   // to stay active until the user quits explicitly with Cmd + Q   if (process.platform !== 'darwin') {     app.quit()   } })    app.on('activate',() => {     // On macOS it's common to re-create a window in the      // app when the dock icon is clicked and there are no      // other windows open.   if (BrowserWindow.getAllWindows().length === 0) {     createWindow()   } })    // In this file, you can include the rest of your  // app's specific main process code. You can also  // put them in separate files and require them here.

• Paso 3: Cree el archivo index.html y el archivo index.js dentro del directorio src . También copiaremos el código repetitivo para el archivo index.html del enlace mencionado anteriormente. Hemos modificado el código para adaptarlo a las necesidades de nuestro proyecto.

  índice.html:

  <!DOCTYPE html> <html>   <head>     <meta charset="UTF-8">     <title>Hello World!</title>     <!-- https://electronjs.org/docs/tutorial                            /security#csp-meta-tag -->     <meta http-equiv="Content-Security-Policy"            content="script-src 'self' 'unsafe-inline';" />   </head>   <body>     <h1>Hello World!</h1>     We are using node      <script>         document.write(process.versions.node)     </script>, Chrome      <script>         document.write(process.versions.chrome)     </script>, and Electron      <script>         document.write(process.versions.electron)     </script>.        <br><br>     <button id="save">Save sample.txt to local System</button>        <!-- Adding Individual Renderer Process JS File -->     <script src="index.js"></script>   </body> </html>

  Salida: en este punto, nuestra aplicación está configurada y podemos iniciar la aplicación para verificar la salida de la GUI. Para iniciar la aplicación Electron, ejecute el comando:

  npm start

  

• Paso 4: el botón Guardar sample.txt en el sistema local aún no tiene ninguna funcionalidad asociada.
  index.js: agregue el siguiente fragmento en ese archivo.

  const electron = require('electron'); const path = require('path'); const fs = require('fs'); // Importing dialog module using remote const dialog = electron.remote.dialog;    var save = document.getElementById('save');    save.addEventListener('click', (event) => {     // Resolves to a Promise<Object>     dialog.showSaveDialog({         title: 'Select the File Path to save',         defaultPath: path.join(__dirname, '../assets/sample.txt'),         // defaultPath: path.join(__dirname, '../assets/'),         buttonLabel: 'Save',         // Restricting the user to only Text Files.         filters: [             {                 name: 'Text Files',                 extensions: ['txt', 'docx']             }, ],         properties: []     }).then(file => {         // Stating whether dialog operation was cancelled or not.         console.log(file.canceled);         if (!file.canceled) {             console.log(file.filePath.toString());                            // Creating and Writing to the sample.txt file             fs.writeFile(file.filePath.toString(),                           'This is a Sample File', function (err) {                 if (err) throw err;                 console.log('Saved!');             });         }     }).catch(err => {         console.log(err)     }); });

  El dialog.showSaveDialog(browserWindow, options) toma los siguientes parámetros. Para obtener información más detallada sobre el método dialog.showSaveDialog() , consulte este enlace .

  • browserWindow: BrowserWindow (Opcional) La instancia de BrowserWindow . Este argumento permite que el cuadro de diálogo nativo se adjunte a la ventana principal, convirtiéndolo en un modal . Una ventana modal es una ventana secundaria que desactiva la ventana principal. Si no se muestra la instancia de BrowserWindow , el cuadro de diálogo no se adjuntará a ella. En tal caso, se mostrará como una ventana independiente. En el código anterior, la instancia de BrowserWindow no se pasa al cuadro de diálogo, por lo tanto, el cuadro de diálogo se abre como una ventana independiente al hacer clic en el botón Guardar ejemplo.txt en el sistema local . Para obtener información más detallada sobre el objeto BrowserWindow y la ventana modal, consulte este enlace .
  • opciones: Objeto Toma los siguientes parámetros,
    • title: String (Opcional) El título que se mostrará en la ventana de diálogo.
    • defaultPath: String (Opcional) La ruta del directorio absoluto, la ruta del archivo absoluto o el nombre del archivo que se abrirá/usará de forma predeterminada al hacer clic en el botón Guardar sample.txt en el sistema local . En caso de que especifiquemos la ruta absoluta del directorio, el Explorador de archivos navegará a ese directorio pero no completará el campo de texto Nombre de archivo: en la ventana de diálogo. En caso de que se especifique la ruta absoluta del archivo junto con el nombre y la extensión del archivo, el campo de texto Nombre del archivo: se completará automáticamente como se muestra en el código. En ambos casos, la ruta del archivo y el nombre del archivo se pueden cambiar desde la ventana de diálogo.
    • buttonLabel: String (Opcional) Etiqueta personalizada para el botón de confirmación. Si está vacío, se utilizará la etiqueta predeterminada. En el código anterior se define como Guardar .
    • mensaje: string (opcional) Este parámetro solo se admite en macOS . Esto se usa para mostrar el mensaje personalizado sobre los campos de texto.
    • nameFieldLabel: string (opcional) Este parámetro solo se admite en macOS . Define una etiqueta personalizada para el texto que se muestra delante del nombre de archivo: campo de texto.
    • showsTagField: booleano (opcional) Este parámetro solo se admite en macOS . Muestra el cuadro de entrada de etiquetas para asignar etiquetas personalizadas a los archivos. El valor predeterminado es verdadero .
    • securityScopedBookmarks: booleano (opcional) Este parámetro solo se admite en macOS . Este parámetro se usa para crear un marcador con ámbito de seguridad cuando se empaqueta para Mac App Store. Si esta opción se establece en verdadero y el archivo no existe, se creará un archivo en blanco en la ruta elegida. Para obtener información más detallada, consulte este enlace .
    • filtros: FileFilter[{}] (Opcional) Es una array de objetos. Define una array de tipos de archivos que se pueden mostrar cuando queremos limitar al usuario a un tipo específico. Podemos definir múltiples tipos de archivos pertenecientes a diferentes categorías. El objeto FileFilter toma los siguientes parámetros,
      • nombre: String El nombre de la categoría de extensiones.
      • extensiones: String[] La array de extensiones debe constar de extensiones sin comodines ni puntos, como se muestra en el código. Para mostrar todos los archivos, utilice el comodín * (no se admite ningún otro comodín). Para obtener información más detallada, consulte este enlace .

      En el código anterior, queremos restringir al usuario solo a archivos de texto. Por lo tanto, hemos definido el nombre como Archivos de texto y la array de extensiones como [‘txt’, ‘docx’] .

    • properties: String[] (Opcional) Contiene una lista de características que están disponibles para el cuadro de diálogo nativo. Toma toma en los siguientes valores,
      • showHiddenFiles: Mostrar archivos ocultos en el cuadro de diálogo.
      • createDirectory: este valor solo se admite en macOS . Permite crear nuevos directorios desde dentro del diálogo. En Windows , el menú contextual está predisponible en el cuadro de diálogo (haga clic con el botón derecho en la ventana de diálogo) y podemos crear nuevos archivos y directorios a partir de él.
      • treatPackageAsDirectory: este valor solo se admite en macOS . Trata paquetes como carpetas .app , como un directorio en lugar de un archivo.
      • dontAddToRecent: este valor solo se admite en Windows . Este valor significa que el archivo que se está guardando no debe agregarse a la lista de documentos recientes.
      • showOverwriteConfirmation: este valor solo se admite en Linux . Este valor define si se debe presentar al usuario un cuadro de diálogo de confirmación si el usuario escribe un nombre de archivo que ya existe en ese directorio.

  El dialog.showSaveDialog(browserWindow, options) devuelve una Promesa . Se resuelve en un Objeto que contiene los siguientes parámetros,

  • cancelado: booleano Si se canceló o no la operación de diálogo.
  • filePath: String (Opcional) La ruta del archivo elegida por el usuario. Si se cancela la operación de diálogo, no estará definida .
  • marcador: string (opcional) Esta string de retorno solo se admite en macOS . Es una string codificada en Base64 que contiene los datos de marcador de ámbito de seguridad para el archivo guardado. Esto se devuelve cuando el parámetro securityScopedBookmarks se define como verdadero en el objeto de opciones . Para los diferentes valores de retorno, consulte este enlace .

  El método fs.writeFile(file, data, options, callback) se utiliza para escribir los datos especificados en un archivo. De forma predeterminada, esto reemplazará el archivo si existe en la ruta de archivo definida. Hemos especificado la ruta absoluta del archivo, los datos de la string que se escribirán y una devolución de llamada para manejar el error en el código anterior. Podemos usar el parámetro de opciones para modificar la funcionalidad. Para obtener información más detallada, consulte este enlace .

  Ahora deberíamos poder elegir con éxito la ruta del archivo desde la ventana de diálogo, dar un nuevo nombre de archivo (si es necesario, en nuestro código será sample.txt por defecto) y guardar el archivo sample.txt recién creado en esa ruta.
  Producción: