使用 Javascript 以 zip 或文件夹的形式下载多个文件?

Posted

技术标签:

【中文标题】使用 Javascript 以 zip 或文件夹的形式下载多个文件?【英文标题】:Download multiple files as a zip or in a folder using Javascript? 【发布时间】:2015-03-06 02:06:03 【问题描述】:

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

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

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

如果我有一个 url 数组,我可以这样做......

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

这可行,但会导致下载文件夹中的单个下载文件。这可能很混乱。

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

【问题讨论】:

Downloading multiple files and zip - Chrome extension的可能重复 @DelightedD0D 您链接的问题是关于 Chrome 扩展的,而评分最高的答案仅适用于 Chrome 【参考方案1】:

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

【讨论】:

【参考方案2】:
<!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>

【讨论】:

以上是关于使用 Javascript 以 zip 或文件夹的形式下载多个文件?的主要内容,如果未能解决你的问题,请参考以下文章

使用 Javascript 解密受密码保护的 zip 文件

Java实现打包压缩文件或文件夹生成zip以实现多文件批量下载

如何生成iPhone模拟器构建或.zip文件,以便在Facebook中提交以供iOS审核

提取 zip 文件并将其存储到图像或文件字段

如何以 plist 或 zip 格式读写二进制数据?

使用数据 URI 将多个文件下载到 Zip 文件 Javascript