前端下载多个文件链接整合为压缩包

前端下载多个文件链接整合为压缩包

javascript 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="downloadButton">下载</button>
</body>
<script src="https://cdn.jsdelivr.net/npm/jszip@3/dist/jszip.min.js"></script>
<script>
    const links = [
        'http://39.100.116.85:6001/File/CEcertificateFile/81899821-959d-40d1-ae30-3564a97eedcb_WHOLECE.pdf',
        'http://39.100.116.85:6001/File/CEcertificateFile/317b28f1-ceac-434a-b5b7-a5f3b2b258f5_WHOLECE.pdf'
    ];

    function downloadFile(url) {
        return new Promise((resolve, reject) => {
            fetch(url)
                .then(response => response.blob())
                .then(blob => resolve(blob))
                .catch(error => reject(error));
        });
    }

    document.getElementById('downloadButton').addEventListener('click', async function () {
        const zip = new JSZip();

        try {
            const promises = links.map(async link => {
                const fileName = link.substring(link.lastIndexOf('/') + 1);
                const fileBlob = await downloadFile(link);
                zip.file(fileName, fileBlob);
            });

            await Promise.all(promises);

            zip.generateAsync({ type: 'blob' }).then(content => {
                const zipFile = URL.createObjectURL(content);
                const a = document.createElement('a');
                a.href = zipFile;
                a.download = 'files.zip';
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
            });
        } catch (error) {
            console.error('Download failed:', error);
        }
    });
</script>

</html>
相关推荐
Mr_Xuhhh3 分钟前
重生之我在学环境变量
linux·运维·服务器·前端·chrome·算法
永乐春秋1 小时前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿1 小时前
【前端】CSS
前端·css
ggdpzhk1 小时前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
学不会•3 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜5 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点6 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow6 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o6 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic6 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端