Пытаюсь показать прогресс скачивания файла с сервера, для этого я вынес следующий код в директиву:
var app = angular.module('app', ['ui.bootstrap']);
app.controller('downloadCtrl', function($scope) {
$scope.disabled = false;
let ctrl = this;
ctrl.download = function(response) {
let file = response.data;
let fileName = response.headers('Content-Disposition').match(/filename(?:(?:\*=UTF-8'')|(?:=))(.*)/)[1];
let fileReader = new FileReader();
fileReader.onloadstart = () => {
$scope.apply(function() {
$scope.disabled = true;
});
};
fileReader.onload = function() {
let blob = new Blob([new Uint8Array(this.result)], {
type: file.type
});
let objectUrl = URL.createObjectURL(blob);
let a = document.createElement('a');
a.download = decodeURI(fileName.replace(/[\"]/gi, ''));
a.href = objectUrl;
document.body.appendChild(a);
a.click();
setTimeout(function() {
document.body.removeChild(a);
URL.revokeObjectURL(objectUrl);
$scope.$apply(function() {
$scope.disabled = false;
});
}, 2000);
};
fileReader.onprogress = data => {
console.log(data);
if (data.lengthComputable) {
let progress = parseInt(((data.loaded / data.total) * 100), 10);
console.log(progress);
$scope.$apply(function() {
$scope.progress = progress;
});
}
};
fileReader.readAsArrayBuffer(file);
};
});
app.directive('download', function($http) {
return {
restrict: 'EA',
templateUrl: 'download.html',
scope: {},
controller: 'downloadCtrl',
link: function(scope, element, attrs, controller) {
element.on('click', function(){
let url = 'https://github.com/angular-ui/bootstrap/archive/master.zip';
console.log(url);
$http.get(url).then(response => {
console.log(response);
controller.download(response); });
})
}
};
});
.btn > .progress {
margin-bottom: 0;
width: 100px;
}
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script src="https://code.angularjs.org/1.5.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-touch.js"></script>
<script src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-2.5.0.js"></script>
<script type="text/ng-template" id="download.html">
<button class="btn btn-default" ng-disabled="disabled">
<span class="glyphicon glyphicon-download-alt" ng-hide="disabled"></span>
<span uib-progressbar class="progress-striped active" value="progress" ng-show="disabled"></span>
</button>
</script>
</head>
<body ng-app="app">
<div class="container">
<div class="panel panel-default">
<div class="panel-body">
<download></download>
</div>
</div>
</div>
</body>
</html>
Данный код работает, но, с одним небольшим недостатком: открываем консоль разработчика и смотрим процесс выполнения:
- Запрос на сервер на получения файла находится в режиме ожидания.
- Получен ответ от сервера, в консоли разработчика видно что идет процесс получения файла(прогресс бар еще не виден)
- При достижении прогресса в 50..75%(на глазок, из консоли разработчика), появляется прогресс бар, дальше все работает корректно.
Добавил в обработчик события onprogress
вывод в консоль, после того как файл получен, в консоли появляются значение прогресса: 12,17,31,45,59,74,78,92,100
Подскажите что я делаю не так, почему прогресс бар отображается не сразу после начала скачивания файла?
P.S.: поведение повторяется в последних версиях Firefox & Chrome
value="progress"
, странно что вообще срабатывает. Отредактируйте пример, чтобы можно было воспроизвести..btn > .progress
ни к кому не прицепится в этом коде. – Artem Gorlachev 6 окт '17 в 6:54onload
. .btn > .progress ни к кому не прицепится в этом коде. - вы можете проверить открыв снипет на редактирование и запустив на выполнение изменяя значениеdisabled
в контроллере – Bald 6 окт '17 в 8:01onprogress
уFileReader
. – Stepan Kasyanenko 6 окт '17 в 9:38FileReader
есть событияonloadstart
,onload
,onprogress
исходя из которых я и строю свою логику – Bald 6 окт '17 в 9:50FileReader
вы сохраняете данные в браузере. Т.е. эти события происходят когда файл уже получен от сервера. В вопросе же говорится про прогресс скачивания файла. И вот собственно прогресса скачивания я и не вижу. – Stepan Kasyanenko 6 окт '17 в 10:23