Как скачать веб-файл с электронным, сохранить его и показать прогресс загрузки

Замечания: В этой статье мы не будем использовать менеджер загрузок Electron. Эта функция призвана помочь вам легко загружать ресурсы из удаленных источников (и, скорее всего, в частные, но не обязательно) с помощью нескольких строк.

Иногда не пользователь должен управлять загрузкой файлов, а вы. Подумайте о приложении, для работы которого требуются дополнительные файлы, так как в зависимости от каждого пользователя эти файлы изменяются.

Было бы неразумно позволить, чтобы пользователь управлял загрузкой этих файлов, как это позволяет нам делать Electron, однако это не то, что мы хотим.

В родных языках, таких как C #, Objective-C, существуют простые (теоретически) фрагменты, которые показывают, как загрузить файл в ОС без вмешательства пользователя. В этой статье мы собираемся раскрыть способ, с помощью которого вы можете легко загрузить файл без большого количества обходных путей, используя Javascript в Electron с помощью библиотеки запросов узлов.

Требования

Используйте следующую команду, чтобы включить эту библиотеку в ваш проект:

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

Заметка

Ход выполнения определяется в соответствии с размером файла в байтах файла и общим количеством полученных байтов (которые добавляются в received_bytes на каждое событие данных).

Чтобы загрузить файл, используйте метод downloadFile. Этот метод ожидает в качестве первого параметра веб-адрес ресурса и в качестве Второй параметр локальный каталог, в котором будет сохранен файл (включая имя файла и расширение).

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

Повеселись

Ссылка на основную публикацию
Adblock
detector