Angular js，下载所有文件按钮答案

【问题标题】：Angular js, download all files buttonAngular js，下载所有文件按钮
【发布时间】：2015-09-14 15:10:39
【问题描述】：

我有一个完整的 url 数组

{“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”}

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

【问题讨论】：

你想在单次下载的同时使用download all吗？
你能把它们在服务器端打包成一个压缩包吗？
有非服务器端的解决方案吗？
这不是一个好主意（下载多个文件而不压缩），但请尝试阅读以下内容：stackoverflow.com/questions/5353630/…
我不认为这在现代浏览器中是不可能的，除非使用像 flash 这样的 3rd 方。

标签： angularjs

【解决方案1】：

A.要使用文件数组从服务器 URL 下载多个文件，请执行以下步骤 -

Step 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;
            }
        }

第二步，然后使用下面的代码，一张一张的下载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 归档文件，然后在 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
    });

【讨论】：

【解决方案2】：

好的，我创建了一些你想要的东西我不知道这是否是正确的方法，但它可以工作

HTML：

<body ng-app="myApp" ng-controller="myController">
<a id="id"  ng-href="{{button}}" download></a>
<button ng-click="fun();$event.stopPropagation();">Download All</button>
</body>

脚本：

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;                                                                          
        }); 

    }

}

【讨论】：