Aprende a descargar un archivo de la web con Electron usando el módulo de nodo de solicitud.

Cómo descargar un archivo web con electron, guardarlo y mostrar el progreso de la descarga
Nota: en este artículo, no vamos a utilizar el administrador de descargas de Electron. Esta función tiene como objetivo ayudarlo a descargar recursos de fuentes remotas fácilmente (y probablemente privados, pero no necesariamente) con un par de líneas.

A veces, no es el usuario quien necesita manejar las descargas de archivos, sino usted. Piense en una aplicación que requiere algunos archivos adicionales para funcionar, ya que de acuerdo con cada usuario, estos archivos cambian.

No sería inteligente dejar que el usuario maneje la descarga de esos archivos, ya que eso es lo que Electron nos permite hacer, sin embargo, eso no es lo que queremos.

En lenguajes nativos como C #, Objective-C hay fragmentos de código fáciles (teóricamente) que muestran cómo descargar un archivo en el sistema operativo sin la interacción del usuario. En este artículo vamos a exponer una forma en la que puede descargar un archivo sin tantas soluciones fácilmente usando Javascript en Electron con la ayuda de la biblioteca de solicitudes de nodos.

Requisitos

Utilice el siguiente comando para incluir esta biblioteca en su proyecto:

npm install request

Descargar un archivo en su escritorio

Antes de continuar, declare las dependencias básicas en la parte superior de su script.

var request = require('request');
var fs = require('fs');

El sistema de archivos se encargará de escribir el archivo en nuestro escritorio mientras la librería de solicitud lo descarga.

La solicitud está diseñada para ser la forma más sencilla posible de realizar llamadas http. Es compatible con HTTPS y sigue las redirecciones de forma predeterminada. La biblioteca de solicitudes tiene muchas características increíbles que es posible que desee explorar antes de usarla. Gracias a esta biblioteca podremos transmitir cualquier respuesta y guardarla en un archivo.

La magia ocurre con createWriteStreamla función crea un flujo de escritura de una manera muy simple. Después de una llamada a fs.createWriteStream con la ruta de archivo, tiene una secuencia de escritura con la que trabajar. Resulta que los objetos de respuesta (así como la solicitud) son flujos. Entonces transmitiremos los datos GET a la salida del archivo.

Nuestra solución se basa en este principio y es realmente fácil de usar y comprender:

function downloadFile(file_url , targetPath){
    // Save variable to know progress
    var received_bytes = 0;
    var total_bytes = 0;

    var req = request({
        method: 'GET',
        uri: file_url
    });

    var out = fs.createWriteStream(targetPath);
    req.pipe(out);

    req.on('response', function ( data ) {
        // Cambie el valor total de bytes para avanzar más tarde.
        total_bytes = parseInt(data.headers['content-length' ]);
    });

    req.on('data', function(chunk) {
        // Actualizar los bytes recibidos
        received_bytes += chunk.length;

        showProgress(received_bytes, total_bytes);
    });

    req.on('end', function() {
        alert("Archivo descargado correctamente");
    });
}

function showProgress(received,total){
    var percentage = (received * 100) / total;
    console.log(percentage + "% | " + received + " bytes out of " + total + " bytes.");
}

Nota

El progreso se recupera incluso de acuerdo con los bytes en bytes del archivo y el total de bytes recibidos (que se suman received_bytesen cada evento de datos).

Para descargar un archivo, use el método downloadFile. Este método espera como primer parámetro la URL web del recurso y como segundo parámetro el directorio local donde se guardará el archivo (incluido el nombre del archivo y la extensión).

downloadFile("http://www.planwallpaper.com/static/images/butterfly-wallpaper.jpeg", "/var/www/downloads/butterfly-wallpaper.jpeg");

Por último, solo debe preocuparse por proporcionar una ruta local válida. Puede usar un selector de carpeta y luego proporcionar un nombre de archivo, o simplemente proporcionar una ruta estática y recuperar solo el nombre original.

var fileURL = "http://www.planwallpaper.com/static/images/butterfly-wallpaper.jpeg";
// butterfly-wallpaper.jpeg
var filename = getFilenameFromUrl(fileURL);
var downloadsFolder = "C:\\Users\\sdkca\\Downloads";

function getFilenameFromUrl(url){
    return url.substring(url.lastIndexOf('/') + 1);
}

var finalPath = downloadsFolder + "\\" + filename;

downloadFile(fileURL, finalPath);

Implementación basada en promesas

Si no te gusta trabajar con tantas devoluciones de llamada, probablemente seas un tipo de Promesas. El siguiente fragmento implementa el mismo código para descargar un archivo pero con promesas:

/**
 * Promise based download file method
 */
function downloadFile(configuration){
    return new Promise(function(resolve, reject){
        // Guardar variable para conocer el progreso
        var received_bytes = 0;
        var total_bytes = 0;

        var req = request({
            method: 'GET',
            uri: configuration.remoteFile
        });

        var out = fs.createWriteStream(configuration.localFile);
        req.pipe(out);

        req.on('response', function ( data ) {
            // Change the total bytes value to get progress later.
            total_bytes = parseInt(data.headers['content-length' ]);
        });

        // Obtener progreso si existe devolución de llamada
        if(configuration.hasOwnProperty("onProgress")){
            req.on('data', function(chunk) {
                // Update the received bytes
                received_bytes += chunk.length;

                configuration.onProgress(received_bytes, total_bytes);
            });
        }else{
            req.on('data', function(chunk) {
                // Actualizar los bytes recibidos
                received_bytes += chunk.length;
            });
        }

        req.on('end', function() {
            resolve();
        });
    });
}

Y su uso sigue siendo muy simple:

downloadFile({
    remoteFile: "http://www.planwallpaper.com/static/images/butterfly-wallpaper.jpeg",
    localFile: "/var/www/downloads/butterfly-wallpaper.jpeg",
    onProgress: function (received,total){
        var percentage = (received * 100) / total;
        console.log(percentage + "% | " + received + " bytes out of " + total + " bytes.");
    }
}).then(function(){
    alert("File succesfully downloaded");
});

Que te diviertas ❤️!


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