Cómo extraer contenido de archivos .zip (descomprimir) en Electron Framework

Cómo extraer contenido de archivos .zip (descomprimir) en Electron Framework

Antes de que puedas comenzar a usar el contenido (archivos) en un archivo zip, debes descomprimirlo. En este artículo, aprenderás a descomprimir archivos .zip con Electron Framework y el módulo decompress-zip.

Requisitos

Para descomprimir archivos en Electron, necesitarás el módulo decompress-zip, este módulo te permite extraer archivos de un archivo ZIP con un par de líneas de código. Para instalar el archivo decompress-zip en tu proyecto, ejecuta el siguiente comando en tu símbolo del sistema:

npm install decompress-zip

Después de la instalación, podrá solicitar el módulo en su código usando  require('decompress-zip')Visita el repositorio del módulo en Github para obtener más información .

Implementación

Con decompress-zip podrás ejecutar 2 tareas: descomprimir un archivo .zip y listar el contenido de un archivo .zip.

Descomprimir (descomprimir archivo .zip)

Para descomprimir un archivo .zip, usaremos el método unzipper.extract. Este método extrae el contenido del archivo ZIP y devuelve un EventEmitter con dos posibles eventos: errordesencadenado en caso de error y extractcuando se ha completado la extracción.

El valor que se pasa al evento de extracción es un registro básico de cada archivo y cómo se comprimió. Para descomprimir un archivo, debe proporcionar solo la ruta actual del archivo zip y el directorio de destino:

var ZIP_FILE_PATH = "C:/path/to/file/myzipfile.zip";
var DESTINATION_PATH = "C:/desktop/examplefolder";
var unzipper = new DecompressZip(ZIP_FILE_PATH);

// Agregar el detector de eventos de error
unzipper.on('error', function (err) {
    console.log('Aparecio un error', err);
});

// Notificar cuando se extrae todo
unzipper.on('extract', function (log) {
    console.log('Finished extracting', log);
});

// Notificar el "progreso" de los archivos descomprimidos
unzipper.on('progress', function (fileIndex, fileCount) {
    console.log('Archivo extraído' + (fileIndex + 1) + ' of ' + fileCount);
});

// Iniciar extracción del contenido
unzipper.extract({
    path: DESTINATION_PATH
    // Puedes filtrar los archivos que desea descomprimir usando la opción de filtro
    //filter: function (file) {
        //console.log(file);
        //return file.type !== "SymbolicLink";
    //}
});

Si desea filtrar archivos mientras los descomprime, como se mostró antes, puede confiar en la propiedad filter del unzipper.extractmétodo (si el valor devuelto es true, entonces el archivo se descomprimirá). Un objeto de archivo (en la devolución de llamada del filtro) contiene todas las propiedades siguientes:

{  
   "_offset":40,
   "_maxSize":34348,
   "parent":".",
   "filename":"image4.png",
   "path":"image4.png",
   "type":"File",
   "mode":438,
   "compressionMethod":8,
   "modified":"2016-10-18T14:25:12.000Z",
   "crc32":1376504589,
   "compressedSize":34348,
   "uncompressedSize":34381,
   "comment":"",
   "flags":{  
      "encrypted":false,
      "compressionFlag1":false,
      "compressionFlag2":false,
      "useDataDescriptor":false,
      "enhancedDeflating":false,
      "compressedPatched":false,
      "strongEncryption":false,
      "utf8":false,
      "encryptedCD":false
   }
}

El siguiente ejemplo muestra una implementación básica del decompress-zip uso de los diálogos nativos de electron.

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>Electron Zip Uncompress Files</title>
	 
</head>

<body>

    <input type="button" id="select-file" value="Select .zip file" />
    
	<script>
        var DecompressZip = require('decompress-zip');
        var app = require('electron').remote;
        var dialog = app.dialog;

        (function () {
            function uncompress(ZIP_FILE_PATH, DESTINATION_PATH){
                var unzipper = new DecompressZip(ZIP_FILE_PATH);

                // Agregar el detector de eventos de error
                unzipper.on('error', function (err) {
                    console.log('Caught an error', err);
                });
                
                // Notificar cuando se extrae todo
                unzipper.on('extract', function (log) {
                    console.log('Finished extracting', log);
                });
                
                // Notificar el "progreso" de los archivos descomprimidos
                unzipper.on('progress', function (fileIndex, fileCount) {
                    console.log('Extracted file ' + (fileIndex + 1) + ' of ' + fileCount);
                });
                
                // ¡Descomprimir!
                unzipper.extract({
                    path: DESTINATION_PATH
                });
            }

            document.getElementById("select-file").addEventListener("click", () => {
                // Seleccione el archivo .zip
                dialog.showOpenDialog({
                    title:"Select the .zip file to decompress"
                },function (fileNames) {
                    // fileNames is an array that contains the selected file
                    if(fileNames === undefined){
                        console.log("No file selected");
                        return;
                    }else{
                        // Seleccionar carpeta de destino
                        dialog.showOpenDialog({
                            title:"Seleccione la carpeta de destino donde se debe descomprimir el contenido",
                            properties: ["openDirectory"]
                        },function (folderPaths) {
                                // folderPaths es una matriz que contiene todas las rutas seleccionadas
                            if(fileNames === undefined){
                                console.log("No destination folder selected");
                                return;
                            }else{
                                // Proceda a descomprimir
                                uncompress(fileNames[0], folderPaths[0]);
                            }
                        });
                    }
                });          
            }, false);
        })();
    </script>
</body>

</html>

El código anterior creará una aplicación simple con un botón que le permitirá seleccionar un archivo .zip para descomprimir:

Select .zip file browser

Puede (si lo desea) filtrar solo los .ziparchivos en el navegador de archivos agregando la propiedad de filtros en la inicialización del navegador de archivos:

dialog.showOpenDialog({
    title:"Seleccione el archivo .zip para descomprimir",
    filters: [
        {name: '.ZIP Files', extensions: ['zip']},
        {name: 'All Files', extensions: ['*']}
    ]
}, (fileNames) => {
    // El resto del código aquí
});

Select only .zip file browser

Luego almacenará la ruta del archivo en una variable, y comenzará una vez más un cuadro de diálogo que le permitirá elegir una carpeta donde se descomprima el contenido del archivo zip:

Select browser to decompress .zip file

Según las acciones anteriores, el Downloads.ziparchivo se descomprimirá en la carpeta Desktop/example. Una vez que seleccione la carpeta, la descompresión comenzará a mostrar el progreso en la consola y guardará los archivos en la carpeta de destino:

Decompressed .zip file with electron

Muestra el contenido del archivo .zip

Puede enumerar el contenido de un archivo sin descomprimirlo directamente usando el unzipper.listmétodo. El método de lista es muy parecido a extraer, excepto que el evento de éxito enumera los datos del evento. Además, la matriz recuperada proporciona las rutas de los archivos, lo que significa que en realidad no se extraen archivos. El método de lista no espera argumentos.

El siguiente fragmento debería:

var ZIP_FILEPATH = "C:/path/to/file/myzipfile.zip";

// Require DecompressZip module
var DecompressZip = require('decompress-zip');

// Declare the unzipper class
var unzipper = new DecompressZip(ZIP_FILEPATH);
 
// Add the error event listener
unzipper.on('error', (err)  => {
    console.log('Caught an error', err);
});

// Add the list event listener that will be triggered when the unzipper can list the content
unzipper.on('list', (files) => {
    // Show the array of items in the console
    console.log(files);
});

// Trigger to list the content of the zip file
unzipper.list();

El siguiente documento HTML en electron muestra cómo listar el contenido de un archivo .zip (arrastre y suelte un archivo .zip para listar el contenido en la consola).

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>Electron Zip List Files</title>
	<style>
		#drag-file {
			background-color: blue;
            color:white;
			text-align: center;
            width:300px;
            height:300px;
		}
	</style>
</head>

<body>
	<div id="drag-zip">
		<p>Drag your zip files here to list content on the console</p>
	</div>
    
	<script>
        var DecompressZip = require('decompress-zip');

        (function () {
            var holder = document.getElementById('drag-zip');
            
            holder.ondragover = holder.ondragleave = holder.ondragend = () => {
                return false;
            };

            holder.ondrop = (e) => {
                e.preventDefault();

                var firstFile = e.dataTransfer.files[0];

                if(!firstFile){
                    console.log("No file given");
                    return;
                }

                var unzipper = new DecompressZip(firstFile.path);
 
                unzipper.on('error', (err)  => {
                    console.log('Caught an error', err);
                });
                
                unzipper.on('list', (files) => {
                    console.log('The zip file contains:');
                    console.log(files);
                });
                
                unzipper.list();
                                 
                return false;
            };
        })();
    </script>
</body>

</html>

La implementación del ejemplo anterior en Electron debería dar como resultado:

Electron list .zip file

Como puede ver, extraer archivos .zip es bastante fácil con este módulo creado por Bower. Que te diviertas !

Esto podria interesarte

Conviertete en un programador más sociable