jszip实现批量下载mp4、psd、jpg等各种类型文件，并压缩导出

2023-12-14 10:42:09

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>批量下载并压缩文件</title>
    <style>
      .color{display: inline-block; height: 20px; width: 500px; background: #eee; border: 1px solid #000; margin-top: 20px;}
      .span{background: red; height: 100%; width: 0;}
    </style>
</head>
<body>
    <button onclick="downloadAndZip()">下载并压缩</button>
    <div class="box">
      进度: <div class="color"><div class="span"></div></div> 
    <script src="js/jszip.min.js"></script>
    <script src="js/jszip-utils.min.js"></script>

    <script>
        function downloadAndZip() {
            // 创建JSZip实例
            var zip = new JSZip();

            // 文件URL列表
            var fileUrls = [
                'main/4.psd',
                'main/media.mp4',
                'main/pic1.gif',
                'main/pic2.png',
                // 添加更多文件URL
            ];

            // 计数器，用于跟踪下载进度
            var downloadCount = 0;

            // 下载文件并添加到压缩包
            function downloadFile(url) {
                return JSZipUtils.getBinaryContent(url).then(function (data) {
                    // 将文件添加到压缩包
                    zip.file(url.substring(url.lastIndexOf('/') + 1), data, { binary: true });

                    // 增加下载计数
                    downloadCount++;

                    // 更新进度
                    updateProgress();

                    return Promise.resolve();
                });
            }

            // 更新下载进度
            function updateProgress() {
              var span = document.getElementsByClassName("span")[0];
              
              span.style.width = (downloadCount / fileUrls.length) * 100 + "%";
              console.log('已下载文件数：', downloadCount, '/', fileUrls.length);
             
                // 如果所有文件都已下载，创建并下载压缩包
                if (downloadCount === fileUrls.length) {
                    zip.generateAsync({ type: 'blob' }).then(function (blob) {
                        // 创建下载链接
                        var link = document.createElement('a');
                        link.href = URL.createObjectURL(blob);
                        link.download = 'compressed_files.zip';

                        // 模拟点击下载链接
                        link.click();

                        console.log('下载完成！');
                    });
                }
            }

            // 循环下载文件
            fileUrls.forEach(function (url) {
                downloadFile(url);
            });
        }
    </script>
</body>
</html>

文章来源:https://blog.csdn.net/qq_44681558/article/details/134987303
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。