ionic-文件下载指令

文件下载一般比较麻烦,这里使用angularjs的指令进行封装,可以方便调用。
此指令并没有做断点续传,因为断点续传需要将保存断点传输字节流到redis里面。
1. drDownFileLink指令

directives.directive('drDownFileLink', ['$cordovaFileTransfer', '$timeout','$ionicLoading','IonicNoticeService'
, function ($cordovaFileTransfer, $timeout,$ionicLoading,IonicNoticeService) {
    return {
        restrict: 'AE',
        scope: {fileName: '=', url: '=', prefix:'=', initText:'@'},
        replace: true,
        template: '<a ng-click="download()">{{initText}}</a>',
        link: function (scope, element, attrs) {
            var lnk = element.find('a');
            for (key in attrs.$attr) {
                lnk.attr(key, attrs.$attr[key]);
            }
            scope.download = function(){
                console.log(scope.fileName);
                console.log(scope.url);
                console.log(scope.prefix);
                var _onDeviceReady = function () {
                    var targetPath = cordova.file.externalRootDirectory + scope.fileName;
                    var trustHosts = true;
                    var options = {};
                    var url = scope.prefix + scope.url;
                    $ionicLoading.show({template: "已经下载:0%"});
                    $cordovaFileTransfer.download(url, targetPath, options, trustHosts)
                        .then(function (result) {
                            IonicNoticeService.show('下载完成,文件保存在:'+targetPath,5000);
                        }, function (err) {
                            IonicNoticeService.show(err);
                        }, function (progress) {
                            // 显示下载进度
                            $timeout(function () {
                                var downloadProgress = (progress.loaded / progress.total) * 100;
                                console.log(url);
                                console.log(downloadProgress);
                                $ionicLoading.show({
                                    template: "已经下载:" + Math.floor(downloadProgress) + "%"
                                });
                                if (downloadProgress > 99) {
                                    $ionicLoading.hide();
                                }
                            })
                        });
                }
                document.addEventListener('deviceready', _onDeviceReady, false);
            }
        }
    }
}]);

2 html端调用

<dr-down-file-link init-text="下载" file-name="designchart.absDesignChart.constructDrawName"
                                       url="designchart.absDesignChart.constructDrawPath"
                                       prefix="prefix"
                            class="button button-assertive button-full button-small" style="background: #ff6600" >
                    </dr-down-file-link>

3 controller
controller不需要做什么,只需要给name和url传值就可以

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

warrah

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值