如何使用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数据流式传输到文件输出。
【如何使用Electron下载网络文件，保存并显示下载进度】我们的解决方案基于此原理, 非常易于使用和理解：

function downloadFile(file_url , targetPath){// Save variable to know progressvar 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 bytesreceived_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.jpegvar 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 progressvar 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 existsif(configuration.hasOwnProperty("onProgress")){req.on('data', function(chunk) {// Update the received bytesreceived_bytes += chunk.length; configuration.onProgress(received_bytes, total_bytes); }); }else{req.on('data', function(chunk) {// Update the received bytesreceived_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"); });

玩得开心