如何使用Electron下载网络文件，保存并显示下载进度

本文概述

• 要求
• 在桌面上下载文件
• 基于承诺的实施

注意：在本文中, 我们将不使用Electron的下载管理器。此功能旨在帮助你通过几行轻松地(很可能是私有的, 但不一定是)从远程源下载资源。

有时, 不是你需要处理文件下载的用户, 而是你。考虑一个需要一些额外文件才能工作的应用程序, 因为每个用户都会更改这些文件。

让用户处理这些文件的下载并不明智, 因为那是Electron允许我们执行的操作, 但这不是我们想要的。

在C＃, Objective-C之类的本地语言中, 有一些简单的(理论上的)代码片段, 这些代码片段显示了如何在没有用户交互的情况下在OS中下载文件。在本文中, 我们将介绍一种在节点请求库的帮助下使用Electron中的Javascript轻松下载文件而无需太多变通方法的方法。

要求

• 在这种情况下, 我们将需要节点请求库。

使用以下命令将此库包含在你的项目中：

npm install request

在桌面上下载文件

在继续之前, 请在脚本顶部声明基本依赖性。

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

文件系统将负责在请求lib下载文件时将文件写入我们的桌面。

请求被设计为进行http调用的最简单方法。它支持HTTPS, 默认情况下遵循重定向。请求库具有许多很棒的功能, 你可能需要在使用它之前对其进行探索。由于有了这个库, 我们将能够流式传输任何响应并将其保存到文件中。

神奇之处在于createWriteStream, 该函数以非常简单的方式创建可写流。使用文件路径调用fs.createWriteStream之后, 你可以使用可写流。事实证明, 响应(以及请求)对象是流。因此, 我们将GET数据流式传输到文件输出。

我们的解决方案基于此原理, 非常易于使用和理解：

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 ) {
        // Change the total bytes value to get progress later.
        total_bytes = parseInt(data.headers['content-length' ]);
    });

    req.on('data', function(chunk) {
        // Update the received bytes
        received_bytes += chunk.length;

        showProgress(received_bytes, total_bytes);
    });

    req.on('end', function() {
        alert("File succesfully downloaded");
    });
}

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

注意

根据文件大小(以文件字节为单位)和接收到的字节总数(在每个数据事件上添加到receive_bytes中)来检索进度。

要下载文件, 请使用downloadFile方法。此方法将资源的Web URL作为第一个参数, 将文件保存到的本地目录(包括文件名和扩展名)作为第二个参数。

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

最后, 你只需要担心提供有效的本地路径。你可以使用文件夹选择器, 然后提供文件名, 或者仅提供静态路径并仅检索原始名称。

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);

基于承诺的实施

如果你不喜欢使用这么多回调, 那么你可能是一个Promises的人。以下代码段实现了相同的代码来下载文件, 但带有承诺：

/**
 * Promise based download file method
 */
function downloadFile(configuration){
    return new Promise(function(resolve, reject){
        // Save variable to know progress
        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' ]);
        });

        // Get progress if callback exists
        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) {
                // Update the received bytes
                received_bytes += chunk.length;
            });
        }

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

而且它的用法仍然非常简单：

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");
});

玩得开心