Angular js，下载所有文件按钮 [英] Angular js, download all files button

问题描述

我有一个充满网址的数组

I have an array full of urls

{"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属性来逐一下载它们.但是我必须实现一个全部下载"按钮.有什么建议吗?

what I basically want to do is on the click of a button download every file on that array. I am currently using the download property to download them one by one. But I have to implement a ‘download all’ button. Any suggestions?

推荐答案

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

A. To Download multiple files from server URL using files array follow below steps -

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

Step 1. Convert all files into 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转换的图像-

Step 2. Then download one by one base64string converted images by using below code -

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

注意-间隔用于给出两次下载多个文件之间的时间间隔.

Note - interval is used to give some time interval between multiple file download.

B.要下载Zip格式的多个文件，我们可以使用jsZip和FileSaver.js 或者 如果我们使用Web API和Angularjs，则可以创建一个API方法在服务器上创建zip存档文件，然后在angularjs中，可以使用$ http post或get api调用将文件下载为zip文件(我们必须使用filesaver来以zip格式保存文件). 例如-

B. To Download multiple files in Zip format we can use jsZip and FileSaver.js or if we are using Web API and Angularjs then we can create an API method to create zip archieve file at server and then in angularjs we can use $http post or get api call to download the file as zip file (We have to use filesaver to save the file in zip format). for example -

angularjs中的api调用-

api call in angularjs -

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

调用上述函数并在响应时使用fileSaver.js方法saveAs以zip格式保存文件-

call above function and on response use fileSaver.js method saveAs to save file in zip format for example -

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

这篇关于Angular js，下载所有文件按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！