使用node.js在电子应用程序中下载文件时的进度条 [英] progress bar when file download in electron application using node.js
本文介绍了使用node.js在电子应用程序中下载文件时的进度条的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我使用node.js在电子桌面应用程序中下载视频文件时，我想显示进度条
I want to show a progress bar when my video file download in the electron desktop application using node.js
我已经尝试了progressbar.js库，但仅显示下载何时完成。
I had alredy tried progressbar.js library but it only show when the downloading is completed.
波纹管是我使用progressbar.js库的代码的一部分。
The bellow is the part of my code where I am using the progressbar.js library.
componentDidMount(){
this.bar = new ProgressBar.Circle(this.refs.downloadLoader, {
strokeWidth: 3,
easing: 'easeOut',
duration: 1000,
color: '#0c9928',
trailColor: 'red',
trailWidth: 0.3,
svgStyle: 'block',
trailWidth: 100%
})
请建议我任何替代库或在电子应用程序中如何使用gif的方式。
Please suggest me any alternative library or the way how to use the gif in electron application.
推荐答案
我最近为电子应用程序实现了进度条。
从此处获取的进度条码： https：// scriptscodes .com / simeydotme / battle-net-style-progress-bar-IrGqz
I recently implemented progress bar for my electron app. Progress bar code taken from here : https://scriptscodes.com/simeydotme/battle-net-style-progress-bar-IrGqz
请检查是否可以帮助您
progressbar.css
progressbar.css
.progress {
font-size: 1.2em;
height: 20px;
margin-top: 146px;
background: rgb(129, 171, 144);
border-radius: 2px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.progress--active .progress__bar {
opacity: 1;
}
.progress__text {
width: 20em;
padding: 0 0.9em;
position: absolute;
}
.progress__text em {
font-style: normal;
}
.progress__bar {
color: white;
font-size: 12px;
font-weight: normal;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
line-height: 19px;
display: block;
position: relative;
top: -1px;
left: -1px;
width: 0%;
height: 100%;
opacity: 0;
border: 1px solid;
border-radius: 2px 0 0 2px;
background-size: 100px 30px, 130px 30px, 130px 30px;
background-position: -20% center, right center, left center;
background-repeat: no-repeat, no-repeat, no-repeat;
-webkit-transition: opacity 0.2s ease, width 0.8s ease-out, background-color 1s ease, border-color 0.3s ease, box-shadow 1s ease;
transition: opacity 0.2s ease, width 0.8s ease-out, background-color 1s ease, border-color 0.3s ease, box-shadow 1s ease;
-webkit-animation: pulse 2s ease-out infinite;
animation: pulse 2s ease-out infinite;
background-color: rgba(201, 4, 20, 0.95);
background-image: -webkit-linear-gradient(left, rgba(226, 4, 22, 0) 10%, rgba(250, 6, 26, 0.8) 30%, #fb1f31 70%, rgba(250, 6, 26, 0.8) 80%, rgba(226, 4, 22, 0) 90%), -webkit-linear-gradient(left, rgba(251, 31, 49, 0) 0%, #fb1f31 100%), -webkit-linear-gradient(right, rgba(251, 31, 49, 0) 0%, #fb1f31 100%);
background-image: linear-gradient(90deg, rgba(226, 4, 22, 0) 10%, rgba(250, 6, 26, 0.8) 30%, #fb1f31 70%, rgba(250, 6, 26, 0.8) 80%, rgba(226, 4, 22, 0) 90%), linear-gradient(to right, rgba(251, 31, 49, 0) 0%, #fb1f31 100%), linear-gradient(to left, rgba(251, 31, 49, 0) 0%, #fb1f31 100%);
border-color: #fb3848;
box-shadow: 0 0 0.6em #fa061a inset, 0 0 0.4em #e20416 inset, 0 0 0.5em rgba(201, 4, 20, 0.5), 0 0 0.1em rgba(254, 206, 210, 0.5);
}
.progress__bar--orange {
background-color: rgba(201, 47, 0, 0.95);
background-image: -webkit-linear-gradient(left, rgba(227, 53, 0, 0) 10%, rgba(252, 59, 0, 0.8) 30%, #ff4d17 70%, rgba(252, 59, 0, 0.8) 80%, rgba(227, 53, 0, 0) 90%), -webkit-linear-gradient(left, rgba(255, 77, 23, 0) 0%, #ff4d17 100%), -webkit-linear-gradient(right, rgba(255, 77, 23, 0) 0%, #ff4d17 100%);
background-image: linear-gradient(90deg, rgba(227, 53, 0, 0) 10%, rgba(252, 59, 0, 0.8) 30%, #ff4d17 70%, rgba(252, 59, 0, 0.8) 80%, rgba(227, 53, 0, 0) 90%), linear-gradient(to right, rgba(255, 77, 23, 0) 0%, #ff4d17 100%), linear-gradient(to left, rgba(255, 77, 23, 0) 0%, #ff4d17 100%);
border-color: #ff6030;
box-shadow: 0 0 0.6em #fc3b00 inset, 0 0 0.4em #e33500 inset, 0 0 0.5em rgba(201, 47, 0, 0.5), 0 0 0.1em rgba(255, 214, 201, 0.5);
}
.progress__bar--yellow {
background-color: rgba(232, 158, 0, 0.95);
background-image: -webkit-linear-gradient(left, rgba(255, 174, 3, 0) 10%, rgba(255, 183, 28, 0.8) 30%, #ffbf36 70%, rgba(255, 183, 28, 0.8) 80%, rgba(255, 174, 3, 0) 90%), -webkit-linear-gradient(left, rgba(255, 191, 54, 0) 0%, #ffbf36 100%), -webkit-linear-gradient(right, rgba(255, 191, 54, 0) 0%, #ffbf36 100%);
background-image: linear-gradient(90deg, rgba(255, 174, 3, 0) 10%, rgba(255, 183, 28, 0.8) 30%, #ffbf36 70%, rgba(255, 183, 28, 0.8) 80%, rgba(255, 174, 3, 0) 90%), linear-gradient(to right, rgba(255, 191, 54, 0) 0%, #ffbf36 100%), linear-gradient(to left, rgba(255, 191, 54, 0) 0%, #ffbf36 100%);
border-color: #ffc74f;
box-shadow: 0 0 0.6em #ffb71c inset, 0 0 0.4em #ffae03 inset, 0 0 0.5em rgba(232, 158, 0, 0.5), 0 0 0.1em rgba(255, 248, 232, 0.5);
}
.progress__bar--green {
background-color: rgba(0, 178, 23, 0.95);
background-image: -webkit-linear-gradient(left, rgba(0, 204, 26, 0) 10%, rgba(0, 229, 30, 0.8) 30%, #00ff21 70%, rgba(0, 229, 30, 0.8) 80%, rgba(0, 204, 26, 0) 90%), -webkit-linear-gradient(left, rgba(0, 255, 33, 0) 0%, #00ff21 100%), -webkit-linear-gradient(right, rgba(0, 255, 33, 0) 0%, #00ff21 100%);
background-image: linear-gradient(90deg, rgba(0, 204, 26, 0) 10%, rgba(0, 229, 30, 0.8) 30%, #00ff21 70%, rgba(0, 229, 30, 0.8) 80%, rgba(0, 204, 26, 0) 90%), linear-gradient(to right, rgba(0, 255, 33, 0) 0%, #00ff21 100%), linear-gradient(to left, rgba(0, 255, 33, 0) 0%, #00ff21 100%);
border-color: #19ff37;
box-shadow: 0 0 0.6em #00e51e inset, 0 0 0.4em #00cc1a inset, 0 0 0.5em rgba(0, 178, 23, 0.5), 0 0 0.1em rgba(178, 255, 188, 0.5);
}
.progress__bar--blue {
background-color: rgba(18, 135, 204, 0.95);
background-image: -webkit-linear-gradient(left, rgba(20, 151, 227, 0) 10%, rgba(37, 162, 236, 0.8) 30%, #3dacee 70%, rgba(37, 162, 236, 0.8) 80%, rgba(20, 151, 227, 0) 90%), -webkit-linear-gradient(left, rgba(61, 172, 238, 0) 0%, #3dacee 100%), -webkit-linear-gradient(right, rgba(61, 172, 238, 0) 0%, #3dacee 100%);
background-image: linear-gradient(90deg, rgba(20, 151, 227, 0) 10%, rgba(37, 162, 236, 0.8) 30%, #3dacee 70%, rgba(37, 162, 236, 0.8) 80%, rgba(20, 151, 227, 0) 90%), linear-gradient(to right, rgba(61, 172, 238, 0) 0%, #3dacee 100%), linear-gradient(to left, rgba(61, 172, 238, 0) 0%, #3dacee 100%);
border-color: #54b6f0;
box-shadow: 0 0 0.6em #25a2ec inset, 0 0 0.4em #1497e3 inset, 0 0 0.5em rgba(18, 135, 204, 0.5), 0 0 0.1em rgba(225, 242, 252, 0.5);
}
.progress__bar:before, .progress__bar:after {
content: "";
position: absolute;
right: -1px;
top: -10px;
width: 1px;
height: 40px;
}
.progress__bar:before {
width: 7px;
right: -4px;
//background: -webkit-radial-gradient(center ellipse, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 75%);
background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 75%);
}
.progress__bar:after {
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 25%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0) 100%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 25%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0) 100%);
}
.progress--complete .progress__bar {
-webkit-animation: none;
animation: none;
border-radius: 2px;
}
.progress--complete .progress__bar:after, .progress--complete .progress__bar:before {
opacity: 0;
}
@-webkit-keyframes pulse {
0% {
background-position: -50% center, right center, left center;
}
100% {
background-position: 150% center, right center, left center;
}
}
@keyframes pulse {
0% {
background-position: -50% center, right center, left center;
}
100% {
background-position: 150% center, right center, left center;
}
}
电子渲染过程：downloader.js
Electron render process : downloader.js
const {session} = require('electron').remote;
session.defaultSession.on('will-download', function(event, downloadItem, webContents){
"use strict";
console.log("dowloader is called with event "+ event + " webContents "+ webContents);
if(downloadItem.getTotalBytes() === 0){
swal({
position: 'center',
type: 'error',
title: 'File is empty !!',
showConfirmButton: true,
timer: 3000
});
}
downloadItem.on('updated', function (event, state) {
console.log("download item event triggred " + event + state);
if (state === 'interrupted') {
console.log('Download is interrupted but can be resumed');
}else if (state === 'progressing') {
console.log("download is processing");
let jQueryprogress = jQuery(".progress");
let jQuerybar = jQuery(".progress__bar");
let jQuerytext = jQuery(".progress__text");
let percent = 0;
let update;
let resetColors;
let speed = 200;
let orange = 30;
let yellow = 55;
let green = 85;
let timer;
resetColors = function() {
jQuerybar
.removeClass("progress__bar--green")
.removeClass("progress__bar--yellow")
.removeClass("progress__bar--orange")
.removeClass("progress__bar--blue");
jQueryprogress
.removeClass("progress--complete");
};
update = function() {
timer = setTimeout( function() {
console.log("running");
try{
let percentage = downloadItem.getReceivedBytes()/downloadItem.getTotalBytes();
percent = percentage * 100;
percent = parseFloat( percent.toFixed(2) );
update();
}catch (error){
clearTimeout(timer);
console.log("Error while try to calculate received bytes inside downloader "+ error);
percent = 100;
resetColors();
jQueryprogress.addClass("progress--complete");
jQuerybar.addClass("progress__bar--blue");
jQuerytext.find("em").text( "Complete" );
percent = 0;
}
jQuerytext.find("em").text( percent + "%" );
if( percent >= green ) {
jQuerybar.addClass("progress__bar--green");
}
else if( percent >= yellow ) {
jQuerybar.addClass("progress__bar--yellow");
}
else if( percent >= orange ) {
jQuerybar.addClass("progress__bar--orange");
}
speed = Math.floor( Math.random() * 100 );
jQuerybar.css({ width: percent + "%" });
}, speed);
};
jQuery(".progress").show();
jQueryprogress.addClass("progress--active");
update();
resetColors();
}
});
downloadItem.once('done', function(event, state) {
console.log("Inside download done function "+ event + state);
if (state === 'completed') {
setTimeout(function(){
jQuery(".progress").hide();
swal({
position: 'center',
type: 'success',
title: 'File downloded successfully !',
showConfirmButton: true,
timer: 3000
});
}, 50);
} else if (state === 'cancelled'||state === "interrupted"){
jQuery(".progress").hide();
console.log("downloas cancelled");
swal({
position: 'center',
type: 'error',
title: 'Download cancelled or interrupted !!',
showConfirmButton: true,
timer: 2000
});
} else {
jQuery(".progress").hide();
swal({
position: 'center',
type: 'error',
title: 'Download failed !!',
showConfirmButton: true,
timer: 2000
});
}
});
session.defaultSession.clearStorageData([], function () {console.log(' cleared all storages after download ');});
session.defaultSession.clearCache(function(){console.log('cleared all caches after download');});
});
HTML代码：
<div class="progress" style="display: none">
<b class="progress__bar">
<span class="progress__text">
Progress: <em>0%</em>
</span>
</b>
</div>
<a href="yoururl" download id="downloadreport" style="display: none">Download Report</a>
这篇关于使用node.js在电子应用程序中下载文件时的进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
