Question

我有一个充满网址的数组

{“http://img.viralpatel.net/2013/07/angularjs-routing-view-controller.png”,”http://img.viralpatel.net/2013/07/angularjs-routing-view-controller.png”,”http://img.viralpatel.net/2013/07/angularjs-routing-view-controller.png”}

我基本上想要做的是点击按钮下载该阵列上的每个文件。我目前正在使用下载属性逐个下载它们。但我必须实现'全部下载'按钮。有什么建议吗？

Answer 1

一个。要使用files array从服务器URL下载多个文件，请按照以下步骤进行操作 -

步骤1.将所有文件转换为base64string

var src = ['http://www.example.com/file1.png', 'http://www.example.com/file2.jpeg', 'http://www.example.com/file3.jpg'];

//using canvas to convert image files to base64string
 function convertFilesToBase64String(src, callback, outputFormat) {
            var img = new Image();
            img.setAttribute('crossOrigin', 'anonymous');
            img.onload = function () {
                var canvas = document.createElement('CANVAS');
                var ctx = canvas.getContext('2d');
                var dataURL;
                canvas.height = this.height;
                canvas.width = this.width;
                ctx.drawImage(this, 0, 0);
                dataURL = canvas.toDataURL(outputFormat);
                callback(dataURL);
            };
            img.src = src;
            if (img.complete || img.complete === undefined) {
                img.src = appConfig.config.dummyImage;
                img.src = src;
            }
        }

步骤2.然后使用下面的代码 -

逐个下载base64string转换后的图像

function downloadFile(url, interval) {
            $timeout(function () {
                var a = document.createElement('a');
                document.body.appendChild(a);
                a.download = name;
                a.href = url;
                a.click();
                document.body.removeChild(a);
            }, (interval * 250));
        }

注意 - 间隔用于在多个文件下载之间给出一些时间间隔。

B中。要以Zip格式下载多个文件，我们可以使用jsZip和FileSaver.js 要么如果我们使用Web API和Angularjs，那么我们可以创建一个API方法来在服务器上创建zip archieve文件然后在angularjs中我们可以使用$ http post或者获取api调用来下载文件作为zip文件（我们必须使用filesaver来以zip格式保存文件）。例如 -

在angularjs中调用api -

function downloadFiles(files) {
            return $http.post(baseUrl + 'api/download/files', files, { responseType: 'arraybuffer' });
        }

调用上面的函数和响应使用fileSaver.js方法saveAs以zip格式保存文件，例如 -

//where files => array input of files like [http://www.example.com/file1.png', 'http://www.example.com/file2.jpeg', 'http://www.example.com/file3.jpg'];

    downloadFiles(files).then(function (response) {
        //on success
        var file = new Blob([response.data], { type: 'application/zip' });
        saveAs(file, 'example.zip');
    }, function (error) {
        //on error
        //write your code to handle error
    });

Answer 2

好吧我创造了一些可以做你想要的东西但我不知道如果这是一种正确的方法，但它有效

HTML：

angular.module('myApp',[])
.controller("myController",myController)
function myController($scope){
    var a = ["http://img.viralpatel.net/2013/07/angularjs-routing-view-controller.png",
            "http://img.viralpatel.net/2013/07/angularjs-routing-view-controller.png",
            "http://img.viralpatel.net/2013/07/angularjs-routing-view-controller.png"];
    $scope.button ="http://img.viralpatel.net/2013/07/angularjs-routing-view-controller.png" ;

    $scope.fun = function(){                
        angular.forEach(a,function(value,key){          
            document.getElementById('id').click();
            $scope.button = value;                                                                          
        }); 

    }

}

脚本：

self.loanResult = ko.pureComputed({
    read: function () {
        var result = (self.loanAmount() / self.loanCount());
        return result;
    },
    write: function (value) {
        var result = value * self.loanCount();
        if (result > data) {
            self.loanAlert("OK");
        } else {
            self.loanAlert("No");
        }
    },
    owner: this
});

Angular js，下载所有文件按钮

2 个答案: