显示下载进度条 ionic

Question

我正在开发一个离子应用程序。我正在使用 cordova 的 FileTransfer 插件下载 pdf 文件。我可以将文件下载到我的内存中，但无法显示下载的单个进度条。显示下载进度的最佳方式是什么。

控制器

var url = 'http://someurl.com/api/pdf_download/' + id;
// Android
var targetPath = 'file:///storage/sdcard0/' + id + '.pdf';
var trustHosts = true;
var options = {};
$cordovaFileTransfer.download(url, targetPath, options, trustHosts)
    .then(function(result) {
        console.log(result);
    }, function() {
        var alertPopup = $ionicPopup.alert({
            title: 'No internet access',
            buttons: [{
                text: 'OK',
                type: 'button-assertive'
            }]
        });
        alertPopup.then(function() {});

    }, function(progress) {
        $timeout(function() {
            $scope.downloadProgress = (progress.loaded / progress.total) * 100;
        })
        console.log('progress--->', $scope.downloadProgress);
    });

Answer 1

由于 benka 已经回答了我的问题，您应该使用 <progress> html 元素。

完整的答案可以在这里找到 ->

Answer 2

我用了cordovaToast这个插件feature.Here是显示pdf下载进度的例子

html

<ion-view >
    <div class="bar bar-subheader bar-positive" style="padding:0px;height: 8px;" >
        <progress id="progressbar" max="100" value="{{ downloadProgress }}" class="progress"> </progress>
    </div>
    <ion-content>
    </ion-content>
</ion-view>

css

.progress {
    margin: 0 px;
    height: 8 px;
    background - color: #F1292B!important;
    border - radius: 2 px;
    box - shadow: 0 2 px 5 px rgba(0, 0, 0, 0.25) inset;
}

js

if (window.cordova) {
    var url = '{{base_url}}/pdf_download/' + id;
    // Android
    var targetPath = 'file:///storage/sdcard0/' + 'fpl_' + id + '.pdf';
    var trustHosts = true;
    var options = {};
    $cordovaFileTransfer.download(url, targetPath, options, trustHosts)
        .then(function(result) {
            $cordovaToast
                .show('File downloaded successfully..', 'short', 'center')
                .then(function() {
                    // success
                }, function() {
                    // error
                });

            console.log(result);
        }, function() {
            var alertPopup = $ionicPopup.alert({
                title: 'No internet access',
                buttons: [{
                    text: 'OK',
                    type: 'button-assertive'
                }]
            });
            alertPopup.then(function() {});

        }, function(progress) {
            var dnldpgs = progress.loaded.toString().substring(0, 2);
            $scope.downloadProgress = parseInt(dnldpgs);
        });
}

显示下载进度条 ionic

Show download progress bar ionic

android

angularjs

cordova

progress-bar

ionic-framework