使用Javascript将多个文件作为zip或文件夹下载?

时间:2015-03-06 02:06:03

标签: javascript jquery download zip

是否可以将多个文件从网址下载到一个已创建的文件夹或zip中?

我目前正在下载一个文件,如下所示:

        var download_url = ""; 
        window.location.href = download_url;

如果我有一系列网址,我可以做点像......

for each url in urls
   window.location.href = url;

这样可行,但会在下载文件夹中导致单个下载的文件。这可能很麻烦。

是否可以创建和指定下载所有文件的文件夹或将所有下载的文件转换为zip文件?

2 个答案:

答案 0 :(得分:1)

在现代浏览器中,您可以将所有下载的文件转换为带有JSZip(https://stuk.github.io/jszip/)和AJAX blob下载(Using jQuery's ajax method to retrieve images as a blob)组合的zip,但我希望您会遇到性能问题处理大文件时否则,使用浏览器JS在客户端上创建文件夹是不可能的。

答案 1 :(得分:0)

<!DOCTYPE html>
<html>
    <head><script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.5.0/jszip.min.js" type="text/javascript"> </script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip-utils/0.1.0/jszip-utils.js" type="text/javascript"> </script>
</head>
    <body>
    </body>
        <script>
            var zip = new JSZip();
            var count = 0;
            var zipFilename = "zipFilename.zip";
            var urls = [
                'https://avatars2.githubusercontent.com/u/3269942?s=52&v=4',
                'https://avatars2.githubusercontent.com/u/1234650?s=88&u=bcb313dffc1180bf90c818879749c5184e922aa2&v=4',
                'https://avatars0.githubusercontent.com/u/28157230?s=88&u=e9d1130e4fa2760fa2fccf5f1d2f1c03708b0e4d&v=4'
            ];

            var nombre = "Zip_img";
            //The function is called
            compressed_img(urls, nombre);
            function compressed_img(urls, nombre) {
                var zip = new JSZip();
                var count = 0;
                var name = nombre + ".zip";
                urls.forEach(function(url) {
                   JSZipUtils.getBinaryContent(url, function(err, data) {
                     if (err) {
                         throw err;
                     }
                   zip.file(url, data, {
                       binary: true
                   });
                  count++;
                 if (count == urls.length) {
                    zip.generateAsync({
                        type: 'blob'
                    }).then(function(content) {
                        saveAs(content, name);
                    });
                }
            });
        });
    }

</script>

</html>